Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-14901] ListView: A button within a ListView does not trigger an 'itemclick' event when clicked

GitHub Issuen/a
TypeBug
PriorityHigh
StatusClosed
ResolutionFixed
Resolution Date2013-08-17T01:35:33.000+0000
Affected Version/sRelease 3.1.2, Release 3.2.0
Fix Version/s2013 Sprint 17, 2013 Sprint 17 API, Release 3.1.3, Release 3.2.0
ComponentsCore
Labelsandroid, ios, qe-closed-3.1.3, qe-testadded, regression, triage
ReporterPhilippe Wueger
AssigneePing Wang
Created2013-08-16T12:02:13.000+0000
Updated2020-06-05T09:20:13.000+0000

Description

*Problem* A button within a ListView does not trigger an 'itemclick' event when clicked. These elements trigger a 'itemclick' event when clicked: iOS: ImageView, Label Android: (none - only if the ListViewItem container is clicked directly an 'itemclick' event is triggered) Using a click event listener on the button is no alternative at the moment due to this issue: TIMOB-13747. *Test case* This is a slightly modified version of the ListView example from the documentation.
var win = Ti.UI.createWindow({backgroundColor: 'white'});

// Create a custom template that displays an image on the left, 
// then a title next to it with a subtitle below it.
var myTemplate = {
    childTemplates: [
        {                            // Image justified left
            type: 'Ti.UI.ImageView', // Use an image view for the image
            bindId: 'pic',           // Maps to a custom pic property of the item data
            properties: {            // Sets the image view  properties
                width: '50dp', height: '50dp', left: 0,
            }
        },
        {                            // Title 
            type: 'Ti.UI.Label',     // Use a label for the title 
            bindId: 'info',          // Maps to a custom info property of the item data
            properties: {            // Sets the label properties
                color: 'black',
                font: { fontFamily:'Arial', fontSize: '20dp', fontWeight:'bold' },
                left: '60dp', top: 0,
            }
        },
        {                            // Subtitle
            type: 'Ti.UI.Label',     // Use a label for the subtitle
            bindId: 'es_info',       // Maps to a custom es_info property of the item data
            properties: {            // Sets the label properties
                color: 'gray',
                font: { fontFamily:'Arial', fontSize: '14dp' },
                left: '60dp', top: '25dp',
            }
        },
        {
        	type: 'Ti.UI.Button',
        	bindId: 'button',
        	properties: {
        		title: 'Click',
        		backgroundColor: 'blue',
        		backgroundSelectedColor: 'red',
        		left: '200dp',
        		width: '60dp',
        		height: '50dp'
        	}
        }
    ]
};

var listView = Ti.UI.createListView({
    // Maps myTemplate dictionary to 'template' string
    templates: { 'template': myTemplate },
    // Use 'template', that is, the myTemplate dict created earlier
    // for all items as long as the template property is not defined for an item.
    defaultItemTemplate: 'template'
});
var sections = [];

var fruitSection = Ti.UI.createListSection({ headerTitle: 'Fruits / Frutas'});
var fruitDataSet = [
    // the text property of info maps to the text property of the title label
    // the text property of es_info maps to text property of the subtitle label
    // the image property of pic maps to the image property of the image view
    { info: {text: 'Apple'}, es_info: {text: 'Manzana'}, pic: {image: 'apple.png'}},
    { info: {text: 'Banana'}, es_info: {text: 'Banana'}, pic: {image: 'banana.png'}}
];
fruitSection.setItems(fruitDataSet);
sections.push(fruitSection);

var vegSection = Ti.UI.createListSection({ headerTitle: 'Vegetables / Verduras'});
var vegDataSet = [
    { info: {text: 'Carrot'}, es_info: {text: 'Zanahoria'}, pic: {image: 'carrot.png'}},
    { info: {text: 'Potato'}, es_info: {text: 'Patata'}, pic: {image: 'potato.png'}}
];
vegSection.setItems(vegDataSet);
sections.push(vegSection);

var grainSection = Ti.UI.createListSection({ headerTitle: 'Grains / Granos'});
var grainDataSet = [
    { info: {text: 'Corn'}, es_info: {text: 'Maiz'}, pic: {image: 'corn.png'}},
    { info: {text: 'Rice'}, es_info: {text: 'Arroz'}, pic: {image: 'rice.png'}}
];
grainSection.setItems(grainDataSet);
sections.push(grainSection);

listView.setSections(sections);
win.add(listView);

listView.addEventListener('itemclick', function(evt) {
	alert('Click on: ' + evt.sectionIndex + '/' + evt.itemIndex + '/' + evt.bindId);
});

win.open();

Comments

  1. Daniel Sefton 2013-08-16

    Tested and confirmed on iOS 6 simulator and Samsung Galaxy S2 2.3.6 with Ti SDK 3.1.2 GA and 3.2 CI.
  2. Mark Mokryn 2013-08-16

  3. Daniel Sefton 2013-08-16

    Just to clear up my confusion, you said "for iOS there's a different issue described here: TC-2763", yet that report describes Android?
  4. Daniel Sefton 2013-08-16

    Yeah you're right it's a regression for Android (iOS behavior is the same on both SDK versions), I think I prefer this test case though, it covers more things. I might split it into a separate Android and iOS ticket.
  5. Mark Mokryn 2013-08-16

    Two separate issues IMO - so you can leave my test case for Android. Plus, it's also arguable if a button click in a list item should cause an itemclick event.
  6. Ping Wang 2013-08-16

    This regression is caused by [PR#4241](https://github.com/appcelerator/titanium_mobile/pull/4241).
  7. Ping Wang 2013-08-17

    PR: https://github.com/appcelerator/titanium_mobile/pull/4580
  8. Ping Wang 2013-08-17

    3_1_X PR: https://github.com/appcelerator/titanium_mobile/pull/4581
  9. Ingo Muschenetz 2013-08-17

    [~mokesmokes], you should be able to use the latest 3.1.X build from http://builds.appcelerator.com/#3_1_X to test and see if the issue is resolved for you.
  10. Mark Mokryn 2013-08-17

    Itemclicks now work, with https://github.com/appcelerator/titanium_mobile/pull/4580 in my code (I have a custom build based on 3.1.2 so didn't try your full release). I don't yet have buttons in my list items, so I can't test that part of this issue. Thanks for the fast fix! :)
  11. Priya Agarwal 2013-08-19

    Used the code mentioned in the bug and verified on both iOS and Android platforms. Builds Used - 3.1.3 build - 3.1.3.v20130816184556 Master branch build - 3.2.0.v20130816180843 Observations - 1) For Android itemclick event of list view is triggered when all the three controls label,image and button are clicked on both the builds: 3.2.0.v20130816180843 and 3.1.3.v20130816184556. So its working as expected on Android platform. 2) For iOS itemclick event of list view is not getting triggered on button click on both the builds: 3.2.0.v20130816180843 and 3.1.3.v20130816184556,that is bug still exist on iOS. Verified Environment: Studio: 3.1.2.201308091728 acs:1.0.6 alloy:1.2.1-cr titanium:3.1.2 titanium-code-processor:1.0.2 OS: OSX 10.8.4 Xcode:4.6.3 Devices:iPhone5(v6.1.4), iPadMini (v6.0) and Android NEXUS 7(v4.3)
  12. Priya Agarwal 2013-08-23

    Used the code mentioned in the bug and verified on both iOS and Android platforms. Builds Used - 3.1.3 build - 3.1.3.v20130822140128 Master branch build - 3.2.0.v20130822140028 Observations - 1) For Android itemclick event of list view is triggered when all the three controls label,image and button are clicked on both the builds: 3.2.0.v20130822140028 and 3.1.3.v20130822140128. So its working as expected on Android platform. 2) For iOS itemclick event of list view is not getting triggered on button click on both the builds: 3.2.0.v20130822140028 and 3.1.3.v20130822140128,that is bug still exist on iOS. Verified Environment: Studio: 3.1.3.201308201707 acs:1.0.6 alloy:1.2.1-cr titanium:3.1.2 titanium-code-processor:1.0.2 OS: OSX 10.8.4 Xcode:4.6.3, 5 beta 5 Devices:iPhone5(v6.1.4), iPadMini (v6.0) and Android NEXUS 7(v4.3)
  13. Olga Romero 2013-08-23

    Tested the above code with: Titanium Studio, build: 3.1.3.201308201302 Titanium SDk, build:3.1.3.v20130822140128 CLI: 3.1.2 alloy: 1.2.1-cr Device: GalaxyS3 Android Version 4.0.4 Verified a button within a ListView does trigger an 'itemclick' event when clicked. *for iOS behavior please refer to* http://docs.appcelerator.com/titanium/latest/#!/guide/ListViews
  14. Mathias Eklöf 2020-02-07

    This is still an issue with Ti SDK 8.3.1. Button inside listitem does not trigger event
  15. Marian Kucharcik 2020-06-05

    Please reopen, still present in 9.0.2GA

JSON Source