Titanium JIRA Archive
Appcelerator Community (AC)

[AC-6183] Delay showing alert in item click event

GitHub Issuen/a
TypeBug
Priorityn/a
StatusResolved
ResolutionNeeds more info
Resolution Date2019-04-22T22:27:40.000+0000
Affected Version/sn/a
Fix Version/sn/a
ComponentsTitanium SDK & CLI
Labelsalert, alertDialog, ios, itemclick, listView
ReporterLorenzo Piccinini
AssigneeShak Hossain
Created2019-03-28T13:55:10.000+0000
Updated2019-04-22T22:27:40.000+0000

Description

*Problem:* I have problem with big delay when I click templated (moderately complex ) item of list view.
listView.addEventListener("itemclick", function(e){ù

  Ti.API.info("alert");
  alert("Hello!");
  // or
  // alertDialog();
}) ;
When I click item I instantly see "alert" log in console but the alert "Hello" is shown width 1-2 seconds dalay. With SDK 8.0.0 the problem gets worse. *Workaround:* Using event click configuration inside item template delay disappears.
var itemTemplate = {
    properties: {
        accessoryType: Ti.UI.LIST_ACCESSORY_TYPE_NONE
    },
    events: {
        click: myEvent
    },
}

function myEvent(){
  Ti.API.info("alert");
  alert("Hello!");
}

Comments

  1. Rakhi Mitro 2019-03-29

    Hello, Tested the issue on android and iOS device both with the SDK 8.0.0.GA. Item click event is firing as expected. *Test Code:*
       
       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',
               		accessoryType: Ti.UI.LIST_ACCESSORY_TYPE_NONE,
               		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) {
       	Ti.API.info('Click on: ' + evt.sectionIndex + '/' + evt.itemIndex);
       });
        
       win.open();
       
    *Test Result:*
       [INFO] :   Click on: 1/1
       [INFO] :   Click on: 2/0
       [INFO] :   Click on: 2/0
       [INFO] :   Click on: 1/1
       [INFO] :   Click on: 1/0
       
    Can you please test this sample code on your end and let us know how it goes.
  2. Rakhi Mitro 2019-04-21

    Hello, We haven't heard back from you since our last response. I am just following up to check the status of this case and if you need further help on it. 

JSON Source