Issue
When creating a listView template that overlaps UI elements and we use the 'itemClick' to get the bindId we always receive the id from the element on the back instead of the clicked item.
Testing
After adding zIndex and setting bubble parent to false makes no difference and keeps throwing the wrong bindId.
Steps to repro
1. Run the sample code
2. Click on the label
Expected Result:
The alert will show the bindId 'innerLabel'
Actual Result:
The alert show the bindId 'innerThumbnailImageView'
Sample code
index.xml
<Alloy>
<Window id="index" class="container">
<ListView id="listView" left="0" right="0" top="0" bottom="0" width="Ti.UI.FILL" defaultItemTemplate="listingTemplate" onItemclick="listItemClick">
<Templates>
<ItemTemplate name="listingTemplate" height="200" backgroundColor="white">
<View bindId="container" top="0" bubbleParent="false" width="Ti.UI.FILL" height="200">
<ImageView bindId="innerThumbnailImageView" bubbleParent="false" zIndex="1" left="0" top="0" width="Ti.UI.FILL" height="200"/>
<Label bindId="innerLabel" left="0" top="20" bubbleParent="false" zIndex="5" width="Ti.UI.FILL" height="50" color="red" backgroundColor="green"/>
</View>
</ItemTemplate>
</Templates>
<ListSection id="listingSection"/>
</ListView>
</Window>
</Alloy>
index.js
(function() {
var items = [];
for(var i=0;i<10;++i){
var item = {};
item.innerThumbnailImageView = {
image: '/images/pic.png'
};
item.innerLabel = {
text: 'Inner Label Tester'
};
items.push(item);
}
$.listingSection.items = items;
}());
$.index.open();
function listItemClick(e) {
alert(e.bindId);
}
Workaround
If we add the event directly to the element of the template we receive the correct id.
<Alloy>
<Window id="index" class="container">
<ListView id="listView" left="0" right="0" top="0" bottom="0" width="Ti.UI.FILL" defaultItemTemplate="listingTemplate">
<Templates>
<ItemTemplate name="listingTemplate" height="200" backgroundColor="white">
<View bindId="container" top="0" bubbleParent="false" width="Ti.UI.FILL" height="200">
<ImageView bindId="innerThumbnailImageView" bubbleParent="false" zIndex="1" left="0" top="0" width="Ti.UI.FILL" height="200" onClick="listItemClick"/>
<Label bindId="innerLabel" left="0" top="20" bubbleParent="false" zIndex="5" width="Ti.UI.FILL" height="50" color="red" backgroundColor="green" onClick="listItemClick"/>
</View>
</ItemTemplate>
</Templates>
<ListSection id="listingSection"/>
</ListView>
</Window>
</Alloy>
I made a Pull Request : https://github.com/appcelerator/titanium_mobile/pull/6211 FindViewProxyWithBindIdContainingPoint function have to find bindId from front to back(reverse index).
[~yomybaby]: you made my day! I've tried your PR and it's working really nice :)
I have the same problem, when the patch will be applied to the sdk?
PR here. https://github.com/appcelerator/titanium_mobile/pull/6918 and merged.
Closing ticket as fixed.