Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-13605] iOS: Can't cancel TableViewRow selectedBackgroundColor on label click

GitHub Issuen/a
TypeBug
PriorityLow
StatusOpen
ResolutionUnresolved
Affected Version/sRelease 3.1.0
Fix Version/sn/a
ComponentsiOS
Labelsparity, reprod
ReporterSameeh Harfoush
AssigneeUnknown
Created2013-04-16T13:26:07.000+0000
Updated2018-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();

Comments

  1. Daniel Sefton 2013-04-17

    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.
  2. Lee Morris 2017-05-24

    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

JSON Source