[TIMOB-26666] Android: TableView won't fire click events properly.

GitHub Issue	n/a
Type	Story
Priority	None
Status	Closed
Resolution	Invalid
Resolution Date	2019-02-28T21:37:55.000+0000
Affected Version/s	n/a
Fix Version/s	n/a
Components	Android
Labels	n/a
Reporter	Riduanul Islam
Assignee	Gary Mathews
Created	2018-12-18T20:21:53.000+0000
Updated	2019-02-28T21:37:55.000+0000

Description

We have tested that click event is firing on tableView, but sometimes it does't fire on first or second or third click. Customer also share a sample app with a video for demo checking. There, he escalated a scenario where this issue occurs more randomly.

   
customer scenario: 
click on first item of first section
then click on 1st item of 2nd section any item of 3rd section
scroll back to another item sometime its work sometimes not

It is not prominent, this issue will occur more randomly not regularly. *Video Link*: https://drive.google.com/uc?id=1EPs_qVuYKEFwXIGjlT4SJYIjz0EO1shI&export=download index.tss

"Window[platform=ios]":{
	layout:'vertical'
},
"Window[platform=android]":{
},

"#headings[platform=android]":{
	top:5,
},
"#headings[platform=ios]":{
	top:30,
},
"Button":{
	top:5,bottom:5,
	height:Titanium.UI.SIZE,
	color:'#fff',
	width: Titanium.UI.FILL,
	backgroundColor: '#2b8ec7'
},
"Button[platform=android]":{
	height:35
},
"Label":{
	top:10,bottom:5,left:10,
	height:Ti.UI.SIZE,
	color: '#0e0c0e',
	width: Titanium.UI.FILL,
	textAlign:"left",
	font: {
		fontSize: 15,
		fontFamily: 'verdana,arial,sans-serif'
	}
},
"#tableView":{
	top:0,
	bottom:50,
	left:0,
	right:0,
	backgroundColor:"#fff",
	touchEnabled: true
	
}

index.js

var rowsData = [];

function refreshList() {
    for (var i = 0; i <= 20; i++) {
        drawTableViewRow(i);
    }
    $.tableView.setData(rowsData);
}

refreshList();

function drawTableViewRow(i) {
    var row = Ti.UI.createTableViewRow({
        title : "Row" + i,
        className : 'rowTest',
        touchEnabled : true,
        height : 40,
        hasCheck : false
    });

    var rightView = Ti.UI.createView({
        layout : 'vertical',
        left : 90,
        right : 10,
        top : 5,
        height : Ti.UI.SIZE,
        width : Ti.UI.FILL
    });

    var caption = Titanium.UI.createLabel({
        width : Ti.UI.SIZE,
        ellipsize : true,
        wordWrap : false,
        top : "5",
        left : 0,
        text : '2018-12-12 - ' + i,
        font : {
            fontSize : '14',
            fontWeight : "bold"
        },
        color : '#000'
    });
    rightView.add(caption);
    row.add(rightView);
    if (i == 0 || i == 5 || i == 10) {
        var sectionView = Ti.UI.createView({
            layout : 'vertical',
            left : 90,
            right : 10,
            top : 5,
            height : 30,
            width : Ti.UI.FILL,
            backgroundColor : "#eaeaea"
        });

        var sectionLabel = Titanium.UI.createLabel({
            width : Ti.UI.SIZE,
            ellipsize : true,
            wordWrap : false,
            top : "5",
            text : 'section - ' + i,
            font : {
                fontSize : '14',
                fontWeight : "bold"
            },
            color : '#000'
        });
        sectionView.add(sectionLabel);
        var section = Ti.UI.createTableViewSection({
            headerView : sectionView
        });
        section.add(row);
        rowsData.push(section);
    } else {
        rowsData.push(row);
    }

}

//section.add(row);

// THIS WILL KILL THE EVENT LISTENER
//table.sections = [section];

// THIS WILL KILL THE EVENT LISTENER
//table.appendSection(section);

// THIS WORKS
//table.setData([section]);

// table.addEventListener("click", function(event) {
// alert("TableView Clicked");
// Ti.API.debug(event.row);
// });

function markSelected(e) {

    console.log(' markSelected() ' + e.row.hasCheck);
    var row = e.row;
    row.hasCheck = !row.hasCheck;
    //console.log('JSON: ', e.rowData);
    // var someRowsSelected = false;
    // e.row.hasCheck = !e.row.hasCheck;
    // var rows = $.tableView.data[0].rows;
    // for (var i = 0; i < rows.length; i++) {
    // Ti.API.info(JSON.stringify(rows[i]));
    // Ti.API.info("rows[i].hasCheck:" + rows[i].hasCheck);
    // if (rows[i].hasCheck) {
    // someRowsSelected = true;
    // break;
    // }
    // }
    // Ti.API.info("someRowsSelected:" + someRowsSelected);
    // if (someRowsSelected) {
    // console.log('here 1');
    // //$.deleteSelectedButton.show();
    // } else {
    // console.log('here 2');
    // //$.deleteSelectedButton.hide();
    // }
    row = null;
};

$.win.open();

index.xml

 
<Alloy>
	<Window id="win">
		<TableView  id="tableView" onClick="markSelected"/>
	</Window>
</Alloy>

Comments

Dominic Maricic 2018-12-19

Thanks for posting this. This has been a major issue for our users since we updated. We believe it started after SDK 7.4 as we can't replicate the issue on the older SDK versions. Our users are on the app 8+ hours a day to perform home inspections and this is causing them to miss lots of issues as they think it's selected and it's not.

Gary Mathews 2019-01-14

[~homeinspectorpro] Your test case is quite complex. I've simplified it to the basic components in order to better isolate the issue:

   const win = Ti.UI.createWindow({ backgroundColor: 'gray' });
   const section = Ti.UI.createTableViewSection();
   
   for (let i = 1; i <= 100; i++) {
       section.add(
           Ti.UI.createTableViewRow({
               title: 'Row ' + i,
               height: 40,
               hasCheck: false
           })
       );
   }
   
   const tableView = Ti.UI.createTableView({ data: [ section ] });
   
   tableView.addEventListener('click', (e) => {
       const row = e.row;
       row.hasCheck = !row.hasCheck;
   });
   
   win.add(tableView);
   win.open();

Although, I'm having trouble reproducing the issue.

JSON Source