Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-13434] iOS: TableViewRow .hasCheck bug when used in combination with highlightedColor

GitHub Issuen/a
TypeBug
PriorityMedium
StatusClosed
ResolutionFixed
Resolution Date2013-04-17T23:19:07.000+0000
Affected Version/sn/a
Fix Version/s2013 Sprint 08 API, 2013 Sprint 08, Release 3.1.1, Release 3.2.0
ComponentsiOS
Labelsqe-closed-3.1.1, qe-testadded, regression, triage
ReporterNeil Gupta
AssigneeVishal Duggal
Created2012-12-15T20:29:46.000+0000
Updated2013-09-16T12:43:22.000+0000

Description

If you set the hasCheck property on a tableViewRow on a click event, then the highlightedColor on any labels within that tableViewRow gets stuck. 
tableview.addEventListener('click', function(e) {
    currRow.setHasCheck(false);
    currRow.label.setColor('#000');
    currRow = e.row;
    e.row.setHasCheck(true);
    e.row.label.setColor('#324f85');
});
The label within that row has a highlightedColor of #fff. When clicking on a row, the label turns permanently white. Selecting it again fixes the problem. A workaround is to call setHasCheck twice, while setting the font color explicitly in between the two calls: 
tableview.addEventListener('click', function(e) {
    currRow.setHasCheck(false);
    currRow.label.setColor('#000');
    currRow = e.row;
    e.row.setHasCheck(true);
    e.row.label.setColor('#324f85');
    // need to set hasCheck again to get around Titanium 3.0.0 bug
    e.row.setHasCheck(true);
});
This will still cause the same bug if the row is selected twice in a row now. To work around that, you have to make sure that this row isn't already selected. This bug was introduced in Titanium 3.0.0. I am building using the iOS 6 sdk with Titanium Studio 3.0. The problem exists in both the simulator and on a physical iPhone 5 device.

Comments

  1. Sabil Rahim 2013-03-13

    @Neil Gupta : could you provide us with better test case(a more detailed one). We are having a tough time testing this code. It would be good if we can understand the case that you are trying to do.
  2. Neil Gupta 2013-03-14

    Basically, the problem occurs when tapping a row and setting hasCheck to true. However, the color of the label gets stuck to whatever highlightedColor is. Here is the full code block I am using. I haven't tested if this code works without the workaround in 3.0.2. 
           var createTableRow = function(sub) {
   		var row = Ti.UI.createTableViewRow({
   			className: 'calendarselrow',
   			layout: 'horizontal'
   		});
   		row.color = sub.color;
   		row.name = sub.group.fullName;
   		row.groupId = sub.group.id;
   		var calColor = Ti.UI.createView({
   			left: 8,
   			top: 12,
   			width: 14,
   			height: 14,
   			borderRadius: 7,
   			borderWidth: 1,
   			borderColor: ta.colorLuminance(sub.color, -0.3),
   			backgroundGradient:{type:'linear',
   				colors:[sub.color, ta.colorLuminance(sub.color, -0.2)],
   				startPoint:{x:0,y:0},
   				endPoint:{x:2,y:14},
   				backFillStart:false},
   			touchEnabled: false
   		})
   		, calLabel = Ti.UI.createLabel({
   			text: sub.group.fullName,
   			color: '#000',
   			highlightedColor: '#fff',
   			left: 4,
   			height: 40,
   			touchEnabled: false,
   			font: {fontWeight: 'bold', fontSize: 18}
   		})
   		, calSubLabel = Ti.UI.createLabel({
   			text: sub.group.course.name),
   			left: 10,
   			height: 40,
   			color: '#7a7a7a',
   			highlightedColor: '#fff',
   			touchEnabled: false,
   			font: {fontSize: 12}
   		});
   		row.label = calLabel;
   		row.subLabel = calSubLabel;
   		row.add(calColor);
   		row.add(calLabel);
   		row.add(calSubLabel);
   		if (groupId == sub.group.id) {
   			row.setHasCheck(true);
   			calLabel.color = '#324f85';
   			calSubLabel.color = '#819ccf';
   			currRow = row;
   			color = sub.color;
   			name = sub.group.fullName;
   		}
   		return row;
   	}
   	
   	tableview.addEventListener('click', function(e) {
   		if (e.row.className === 'noCoursesRowInSelection' || e.row.className === 'coursesInstructional')
   			return;
   		if (groupId !== e.rowData.groupId) {
   			color = e.rowData.color;
   			name = e.rowData.name;
   			groupId = e.rowData.groupId;
   			currRow.setHasCheck(false);
   			currRow.label.setColor('#000');
   			currRow.subLabel.setColor('#7a7a7a');
   			currRow = e.row;
   			e.row.setHasCheck(true);
   			e.row.label.setColor('#324f85');
   			e.row.subLabel.setColor('#819ccf');
   			// need to set hasCheck again to get around Titanium 3.0.0 bug
   			e.row.setHasCheck(true);
   		}
   	});
  3. Max Stepanov 2013-04-06

    row.hasCheck triggers row update and should be called last.
  4. Vishal Duggal 2013-04-12

    This the code I am using for testing 
       var win = Ti.UI.createWindow({backgroundColor:'white'});
   
   var tableView = Ti.UI.createTableView();
   
   var createTableRow = function(sub) {
       var row = Ti.UI.createTableViewRow({
           className: 'calendarselrow',
           layout: 'horizontal'
       });
       row.color = sub.color;
       row.name = sub.group.fullName;
       row.groupId = sub.group.id;
       var calColor = Ti.UI.createView({
           left: 8,
           top: 12,
           width: 14,
           height: 14,
           borderRadius: 7,
           borderWidth: 1,
           touchEnabled: false
       })
       , calLabel = Ti.UI.createLabel({
           text: sub.group.fullName,
           color: '#000',
           highlightedColor: '#fff',
           left: 4,
           height: 40,
           touchEnabled: false,
           font: {fontWeight: 'bold', fontSize: 18}
       })
       , calSubLabel = Ti.UI.createLabel({
           text: sub.group.course.name,
           left: 10,
           height: 40,
           color: '#7a7a7a',
           highlightedColor: '#fff',
           touchEnabled: false,
           font: {fontSize: 12}
       });
       row.label = calLabel;
       row.subLabel = calSubLabel;
       row.add(calColor);
       row.add(calLabel);
       row.add(calSubLabel);
       if (groupId == sub.group.id) {
           row.setHasCheck(true);
           calLabel.color = '#324f85';
           calSubLabel.color = '#819ccf';
           currRow = row;
           color = sub.color;
           name = sub.group.fullName;
       }
       return row;
   }
   
   var currRow = null;
   var groupId = null; 
   tableView.addEventListener('click', function(e) {
       if (e.row.className === 'noCoursesRowInSelection' || e.row.className === 'coursesInstructional')
           return;
       if (groupId !== e.rowData.groupId) {
           color = e.rowData.color;
           name = e.rowData.name;
           groupId = e.rowData.groupId;
           if(currRow != null){
               currRow.setHasCheck(false);
               currRow.label.setColor('#000');
               currRow.subLabel.setColor('#7a7a7a');
           }
           currRow = e.row;
           e.row.setHasCheck(true);
           e.row.label.setColor('#324f85');
           e.row.subLabel.setColor('#819ccf');
       }
   });
   
   
   var data = [];
   
   for(i=1;i<50;i++) {
       var sub1 = {color:'blue',group:{fullName:'Group '+i,id:i,course:{name:'Course '+i}}};
       data.push(createTableRow(sub1))
   }
   
   tableView.setData(data);
   
   win.add(tableView);
   
   win.open();
  5. Vishal Duggal 2013-04-15

    Pull pending https://github.com/appcelerator/titanium_mobile/pull/4163
  6. Sabil Rahim 2013-04-17

    FR
  7. Vishal Duggal 2013-04-22

    Backport to 3_1_X https://github.com/appcelerator/titanium_mobile/pull/4204
  8. Olga Romero 2013-04-29

    Tested with: Mac 10.8.3 Mountain Lion Appcelerator Studio, build: 3.1.1.201304281105 SDK, build: 3.1.1.v20130429105103 Devices: iPhone5 iOS 6.1.3 iPad mini iOS iOS 6.0 Actual result: Clicking table view row, highlights it, and check mark is visible.

JSON Source