Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-27994] iOS: itemclick event its firing instead of a move event when ordering items in a list (iOS 13+)

GitHub Issuen/a
TypeBug
PriorityNone
StatusClosed
ResolutionFixed
Resolution Date2020-07-29T19:27:30.000+0000
Affected Version/sRelease 9.0.3
Fix Version/sRelease 9.1.0
ComponentsiOS
Labelsn/a
ReporterSamir Mohammed
AssigneeVijay Singh
Created2020-07-01T13:25:45.000+0000
Updated2021-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:*
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}

Comments

  1. Vijay Singh 2020-07-02

    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+
       - (void)tableView:(UITableView *)tableView accessoryButtonTappedForRowWithIndexPath:(NSIndexPath *)indexPath
       
    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 -
       listView.addEventListener('itemclick', function(e){
       	if (listView.editing == true && e.accessoryClicked == true) {
       		Ti.API.info('Ignore itemclick event. It is fired while moving rows');
       	} else {
       		alert('Item click fired::::::::');
       	}
       });
       
  2. Vijay Singh 2020-07-06

    PR - https://github.com/appcelerator/titanium_mobile/pull/11805
  3. Satyam Sekhri 2020-07-08

    FR Passed
  4. Satyam Sekhri 2020-07-29

    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

JSON Source