Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-6810] iOS: TableView sectionHeader weirdness when combined with searchBar

GitHub Issuen/a
TypeBug
PriorityCritical
StatusClosed
ResolutionFixed
Resolution Date2012-01-16T17:33:40.000+0000
Affected Version/sRelease 1.8.0.1
Fix Version/sSprint 2011-51, Release 2.0.0, Release 1.8.1
ComponentsiOS
Labelsparity
ReporterSergej Kotliar
AssigneeStephen Tramer
Created2011-12-01T02:14:40.000+0000
Updated2012-03-04T21:56:32.000+0000

Description

Problem

When searching in the search bar, with custom sectionHeaders in the Table, there are many visible artifacts/glitches that appear.

sectionHeader title and styling disappears

Empty groups are displayed even when there's nothing in them, leaving behind visible traces of empty sectionheaders.

See attached screenshot.

Test Case

var win1 = Titanium.UI.createWindow();

// create table view data object
var data = [];

var header = Ti.UI.createView({
	backgroundColor:'#999',
	height:'auto'
});

var headerLabel = Ti.UI.createLabel({
	font:{fontFamily:'Helvetica Neue',fontSize:18,fontWeight:'bold'},
	text:'Custom Header - first label',
	color:'#222',
	textAlign:'left',
	top:0,
	left:10,
	width:300,
	height:30
});
var headerLabel2 = Ti.UI.createLabel({
	font:{fontFamily:'Helvetica Neue',fontSize:18,fontWeight:'bold'},
	text:'Custom Header - second label',
	color:'#222',
	textAlign:'left',
	left:10,
	top:50,
	width:300,
	height:30
});
header.add(headerLabel);
header.add(headerLabel2);

var section = Ti.UI.createTableViewSection();
section.headerView = header;

data[0] = section;

section.add(Ti.UI.createTableViewRow({hasChild:true,title:'Row 1'}));
section.add(Ti.UI.createTableViewRow({hasDetail:true,title:'Row 2'}));
section.add(Ti.UI.createTableViewRow({hasCheck:true,title:'Row 3'}));
section.add(Ti.UI.createTableViewRow({title:'Row 4'}));


var search = Titanium.UI.createSearchBar({
	showCancel:false
});
// create table view
var tableview = Titanium.UI.createTableView({
	data:data,
	search:search,
	filterAttribute:'title'
});

win1.add(tableview);
win1.open();

Attachments

FileDateSize
app.js2011-12-01T05:55:02.000+00001438
table_view_api_custom_header.js2011-12-01T05:32:30.000+00001602
visual_glitch_tableview.png2011-12-01T02:14:40.000+0000297278

Comments

  1. Matthew Apperson 2011-12-01

    Sergej, Please remember to follow the guidelines here - http://wiki.appcelerator.org/display/guides/How+to+Submit+a+Bug+Report in filling out a bug report. Your ticket here is missing a code sample and the exact build version you used to show this bug. Best regards, Matt
  2. Sergej Kotliar 2011-12-01

    Sorry about the version, went to look for the exact one and then forgot. It is with Ti 1.8.0.1 from Nov 29th. As for test cases, this is a pretty obvious issue and is even visible in KitchenSink. Attaching a modded version of one of the KitchenSink files where this can be seen.
  3. Sergej Kotliar 2011-12-01

    Throw this into KitchenSink, and it shows the problem
  4. Matthew Apperson 2011-12-01

    Sergej, We request you please adhere closely to this part of the guide - http://wiki.appcelerator.org/display/guides/How+to+Submit+a+Bug+Report#HowtoSubmitaBugReport-CreatingaTestCase In particular the aspect where the code should be able to be placed directly in app.js and run... also further down where we request that you place the file in the code tags directly in the description. Thanks for helping us out with this! :) Best regards, Matt
  5. Sergej Kotliar 2011-12-01

    Alright, putting it in an app.js
  6. Sergej Kotliar 2011-12-01

    Is this code tags?
       // this sets the background color of the master UIView (when there are no windows/tab groups on it)
       Titanium.UI.setBackgroundColor('#000');
       
       //
       // create base UI tab and root window
       //
       var win1 = Titanium.UI.createWindow();
       
       
       // create table view data object
       var data = [];
       
       var header = Ti.UI.createView({
       	backgroundColor:'#999',
       	height:'auto'
       });
       
       var headerLabel = Ti.UI.createLabel({
       	font:{fontFamily:'Helvetica Neue',fontSize:18,fontWeight:'bold'},
       	text:'Custom Header - first label',
       	color:'#222',
       	textAlign:'left',
       	top:0,
       	left:10,
       	width:300,
       	height:30
       });
       var headerLabel2 = Ti.UI.createLabel({
       	font:{fontFamily:'Helvetica Neue',fontSize:18,fontWeight:'bold'},
       	text:'Custom Header - second label',
       	color:'#222',
       	textAlign:'left',
       	left:10,
       	top:50,
       	width:300,
       	height:30
       });
       header.add(headerLabel);
       header.add(headerLabel2);
       
       var section = Ti.UI.createTableViewSection();
       section.headerView = header;
       
       data[0] = section;
       
       section.add(Ti.UI.createTableViewRow({hasChild:true,title:'Row 1'}));
       section.add(Ti.UI.createTableViewRow({hasDetail:true,title:'Row 2'}));
       section.add(Ti.UI.createTableViewRow({hasCheck:true,title:'Row 3'}));
       section.add(Ti.UI.createTableViewRow({title:'Row 4'}));
       
       
       var search = Titanium.UI.createSearchBar({
       	showCancel:false
       });
       // create table view
       var tableview = Titanium.UI.createTableView({
       	data:data,
       	search:search,
       	filterAttribute:'title'
       });
       
       win1.add(tableview);
       win1.open();
       
  7. Sergej Kotliar 2011-12-01

    Ok, I give up. Please help with this.
  8. Matthew Apperson 2011-12-01

    the opening and closing tag are the same, aka no slash in the last tag... if you click edit on your last comment, I edited it to be correct so you can se the example there
  9. Sergej Kotliar 2011-12-01

    Thanks. I'll know for next time. Could you please reopen this bug?
  10. Paul Dowsett 2011-12-19

    Sergej I am sorry if this sounds tough, Sergej, but in order for me to accept this, the environment field needs to be complete, with the information listed in [JIRA Ticket Checklist](https://wiki.appcelerator.org/display/guides/How+to+Submit+a+Bug+Report#HowtoSubmitaBugReport-JIRATicketChecklist). I promise, as soon as this is done correctly, I will escalate the ticket! :) Thanks for your patience with this.
  11. Paul Dowsett 2011-12-19

    Please reopen the ticket once it is complete. Cheers
  12. Sergej Kotliar 2011-12-19

    Yeah Paul, you're a real tough guy. You really showed me there. And then you wonder why there's entire blogs dedicated this company's practices. Three weeks it has taken for you to look at this. Oh, and by the way, there's no way for me to reopen bugs.
  13. Stephen Tramer 2011-12-21

    Looks like a dupe of TIMOB-5760. Both should be tested with the fix for this ticket.
  14. Stephen Tramer 2011-12-21

    Notes for QE and reviewers - Please functional test TIMOB-6760 in tandem with this ticket, fixversioning it appropriately for each review/modification. When that ticket is to finally be resolved, please mark it as a dupe, not as fixed.
  15. Michael Pettiford 2012-01-12

    Closing issue Tested with Ti Studio 1.0.8.201201101928 Ti Mob SDK 1.9.0.v20120111233134 OSX Lion iPhone 4S, iPad 2 Tested this and the test in KS and expected behavior is shown
  16. Stephen Tramer 2012-01-16

    Reopening for manual merge to 1.8.1.
  17. Wilson Luu 2012-01-17

    Closing bug. Verified fix on: SDK build: 1.9.0.v20120117114633 Titanium Studio, build: 1.0.8.201201131907 OS: Mac OS X Lion (10.7.1) Device: iphone 4S (5.0.1) Note: Tested using attached code and KS > Base UI > Views > Table Views > Headers

JSON Source