[TIMOB-13605] iOS: Can't cancel TableViewRow selectedBackgroundColor on label click
GitHub Issue | n/a |
---|---|
Type | Bug |
Priority | Low |
Status | Open |
Resolution | Unresolved |
Affected Version/s | Release 3.1.0 |
Fix Version/s | n/a |
Components | iOS |
Labels | parity, reprod |
Reporter | Sameeh Harfoush |
Assignee | Unknown |
Created | 2013-04-16T13:26:07.000+0000 |
Updated | 2018-02-28T20:03:35.000+0000 |
Description
i have a label in a TableViewRow with selectedBackgroundColor set. what i am trying to do is to avoid the change of the TableViewRow background color when i click on the label inside it. the code below always changes the background color even if i cancelBubble on the label click event. it works on Android but not on iOS.
To work on iOS, set tableRowView touchEnabled to true
To work on Android, set tableRowView touchEnabled to false.
*Test case*
var mainWindow = Ti.UI.createWindow({
title : 'Lab',
backgroundColor : 'white',
fullscreen : false,
navBarHidden : true,
exitOnClose : true,
orientationModes : [Titanium.UI.PORTRAIT]
});
var view = Ti.UI.createView({
width : Ti.UI.FILL,
height : Ti.UI.FILL
});
var tbl = Ti.UI.createTableView({
width : Ti.UI.FILL,
separatorColor : '#eeeeee',
backgroundColor : 'white',
top : 20,
bottom : 10,
left : 10,
right : 10,
showVerticalScrollIndicator : false,
borderColor : 'white',
borderRadius : 4,
borderWidth : 1
});
var tableRow = Ti.UI.createTableViewRow({
className : 'outletRow',
touchEnabled : true,
height : Ti.UI.SIZE,
width : Ti.UI.FILL,
hasChild : true,
selectedBackgroundColor : '#c6c6c6',
parentRow : null
});
var tableRowView = Ti.UI.createView({
width : Ti.UI.FILL,
touchEnabled : false,//set true for iOS - false of Android to bubble event to TableViewRow
height : Ti.UI.SIZE,
top : 0,
left : 5,
right : 5,
layout : 'vertical',
});
var lbl = Ti.UI.createLabel({
color : '#3b5998',
linkLabel : true,
text : "value 1",
left : 0,
touchEnabled : true,
borderRadius : 4,
width : Ti.UI.SIZE,
wordWrap : true,
horizontalWrap : false,
font : {
fontSize : 20
}
});
lbl.addEventListener('click', function(e) {
e.cancelBubble = true;
alert('click')
});
tableRowView.add(lbl);
tableRow.add(tableRowView);
tbl.setData([tableRow]);
view.add(tbl);
mainWindow.add(view);
mainWindow.open();
Tested with 3.1 GA on iOS 6 simulator and Android 4.1.2 emulator - confirmed parity. However, the touchEnabled property doesn't make a difference in either case. Basically, the touch event bubbles on iOS, and doesn't bubble on Android.
I have been able to reproduce this issue with the following environment; iPhone 7 (10.2) MacOS 10.11.6 (15G31) Studio 4.9.0.201705021158 Ti SDK 6.1.0.v20170519131839 Appc NPM 4.2.9 Appc CLI 6.2.1 Ti CLI 5.0.13 Alloy 1.9.11 Arrow 2.0.0 Xcode 8.2 (8C38) Node v4.8.2 Java 1.7.0_80