[TIMOB-27994] iOS: itemclick event its firing instead of a move event when ordering items in a list (iOS 13+)
GitHub Issue | n/a |
---|---|
Type | Bug |
Priority | None |
Status | Closed |
Resolution | Fixed |
Resolution Date | 2020-07-29T19:27:30.000+0000 |
Affected Version/s | Release 9.0.3 |
Fix Version/s | Release 9.1.0 |
Components | iOS |
Labels | n/a |
Reporter | Samir Mohammed |
Assignee | Vijay Singh |
Created | 2020-07-01T13:25:45.000+0000 |
Updated | 2021-02-16T07:37:09.000+0000 |
Description
When using iOS13 or 14 the itemclick event is fired when moving items in a listView instead of a Move event listener.
*Test Case:*
Copy the code above into the
var win = Ti.UI.createWindow({
backgroundColor : 'white'
});
var data = [];
var listSections = [];
var fruitsData;
var vegData;
var plainTemplate = {
childTemplates : [{
type : 'Ti.UI.Label', // Use a label
bindId : 'rowtitle', // Bind ID for this label
properties : {// Sets the Label.left property
left : '10dp',
// backgroundColor : 'blue',
}
}, {
type : 'Ti.UI.Label', // Use a button
bindId : 'label', // Bind ID for this button
properties : {// Sets several button properties
width : '80dp',
height : '40dp',
right : '10dp',
text : 'press me',
touchEnabled : false
}
}],
};
function report(e) {
Ti.API.info(e.type);
}
var listView = Ti.UI.createListView({
templates : {
'plain' : plainTemplate
},
defaultItemTemplate : 'plain',
editing : true,
pruneSectionsOnEdit : true
});
var listArray = [{
id : "1001",
title : "Apple",
moduleId : "Fruits"
},{
id : "1002",
title : "carrot",
moduleId : "Vegetables"
}, {
id : "1003",
title : "Banana",
moduleId : "Fruits"
}, {
id : "1004",
title : "Capsicum",
moduleId : "Vegetables"
}, {
id : "1005",
title : "Brinjal",
moduleId : "Vegetables"
}, {
id : "1006",
title : "Papaya",
moduleId : "Fruits"
}, {
id : "1007",
title : "PineApple",
moduleId : "Fruits"
}, {
id : "1008",
title : "LadiesFinger",
moduleId : "Vegetables"
}
];
function getIndex(array, itemId){
var actualIndex;
array.findIndex(function(arrayObj,index){
if(arrayObj.id.toString() === itemId.toString()){
actualIndex = index;
}
});
return actualIndex;
}
var sourceItemId;
var targetItemId;
var insertBefore = false;
listView.addEventListener('itemclick', function(e){
alert('Item click fired::::::::');
});
listView.addEventListener('move', function(e) {
Ti.API.info('Move event listener::::::::' + JSON.stringify(e));
Ti.API.info('e.itemId:::::' + JSON.stringify(e.itemId));
sourceItemId = e.itemId;
});
function setModuleItems(moduleData){
var listItems = [];
moduleData.forEach(function(listArrayItem){
listItems.push({
rowtitle : {
text : listArrayItem.title
},
label :{
text : "Press Me"
},
properties : {
itemId : listArrayItem.id,
canEdit : true,
canMove : true
}
});
});
return listItems;
}
if(listArray.length > 0){
fruitsData = listArray.filter(listArrayObj => listArrayObj.moduleId === "Fruits");
vegData = listArray.filter(listArrayObj => listArrayObj.moduleId === "Vegetables");
if(fruitsData.length !== 0){
var fruitsSection = Ti.UI.createListSection({
headerTitle :"Fruits"
});
listSections.push(fruitsSection);
fruitsSection.setItems(setModuleItems(fruitsData));
}
if(vegData.length !== 0){
var vegSection = Ti.UI.createListSection({
headerTitle :"Vegetables"
});
listSections.push(vegSection);
vegSection.setItems(setModuleItems(vegData));
}
}
listView.sections = listSections;
win.add(listView);
win.open();
*Test Steps*
Create a Titanium application
Copy the code above into the app.js
Run the app on a iOS 13/14 device
Move one of the items in the listView around
Notice a click event is fired
Rerun application on a device/sim < iOS13
Move one of the items in the listView around
Notice Move event listener is fired and logged
*Expected result* Following should be logged:
[INFO] Move event listener::::::::{"itemId":"1001","itemIndex":0,"targetItemIndex":3,"section":{},"targetSectionIndex":0,"sectionIndex":0,"targetSection":{},"bubbles":false,"type":"move","source":{"canScroll":true,"caseInsensitiveSearch":true,"horizontalWrap":true,"visible":true,"touchEnabled":true,"dictTemplates":{"plain":{}},"defaultItemTemplate":"plain","editing":true,"pruneSectionsOnEdit":true},"cancelBubble":false}
1. In my test behavior is as below - a) For iOS < 13 only 'move' event is fired. b) For iOS 13+ 'move' event as well as 'itemclick' event is fired. 2. While debugging I can see that in native iOS 13+
delegate method is also called, which is invoking 'itemclick' event. In iOS < 13, it is not called. +Solution/Workaround -+ In this case (for iOS 13+), ['itemclick'](https://docs.appcelerator.com/platform/latest/#!/api/Titanium.UI.ListView-event-itemclick) has property 'accessoryClicked' set to 'true'. So apply a condition in your code with help of property 'accessoryClicked'. e.g. Modify 'itemclick' event listener as below -
PR - https://github.com/appcelerator/titanium_mobile/pull/11805
FR Passed
Verified on: Mac OS: 10.15.4 SDK: 9.1.0.v20200727104531 Appc CLI: 8.1.0-master.7 JDK: 11.0.4 Node: 10.17.0 Studio: 6.0.0.202005141803 Xcode: 12.0 beta Device: iOS simulator 14.0 beta, 13.5, 12.2, 11.4