[TIMOB-14901] ListView: A button within a ListView does not trigger an 'itemclick' event when clicked
GitHub Issue | n/a |
---|---|
Type | Bug |
Priority | High |
Status | Closed |
Resolution | Fixed |
Resolution Date | 2013-08-17T01:35:33.000+0000 |
Affected Version/s | Release 3.1.2, Release 3.2.0 |
Fix Version/s | 2013 Sprint 17, 2013 Sprint 17 API, Release 3.1.3, Release 3.2.0 |
Components | Core |
Labels | android, ios, qe-closed-3.1.3, qe-testadded, regression, triage |
Reporter | Philippe Wueger |
Assignee | Ping Wang |
Created | 2013-08-16T12:02:13.000+0000 |
Updated | 2020-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();
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.
Just to clear up my confusion, you said "for iOS there's a different issue described here: TC-2763", yet that report describes Android?
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.
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.
This regression is caused by [PR#4241](https://github.com/appcelerator/titanium_mobile/pull/4241).
PR: https://github.com/appcelerator/titanium_mobile/pull/4580
3_1_X PR: https://github.com/appcelerator/titanium_mobile/pull/4581
[~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.
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! :)
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)
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)
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
This is still an issue with Ti SDK 8.3.1. Button inside listitem does not trigger event
Please reopen, still present in 9.0.2GA