Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-23810] iOS: Delay in firing click event listener on View when using run-on-main-thread

GitHub Issuen/a
TypeBug
PriorityHigh
StatusClosed
ResolutionFixed
Resolution Date2017-01-09T22:54:02.000+0000
Affected Version/sRelease 5.4.0, Release 5.3.1
Fix Version/sRelease 6.1.0
ComponentsiOS
Labelslistview, run-on-main-thread, scrollableView
ReporterNeeraj Mishra
AssigneeVijay Singh
Created2016-08-23T22:30:48.000+0000
Updated2017-01-13T18:59:45.000+0000

Description

Problem Description:

Customer is having an application with multiple views on the top of the screen and a Scrollable view in the bottom with that many views in it.The issue that they are facing here is with receiving 'click' event when the view in the top is clicked and receiving 'scroll' event when the scrollable view is scrolled. Sometimes there is lot of delay in receiving these events and hence effecting the application's responsiveness.

Steps to re-produce:

Due to complexity of the app neither we nor customer could reproduce the issue at smaller scale.Attaching app provided from customer which would show the skeleton of the app but do not reproduce the issue.

Expected Behavior:

Application should response fast enough when clicking on view on top of the screen or while scrolling the pages.

Fault Isolation:

As the ListViews in application has different elements like Label, TextField, Switch. Removing the ListViews in the Scrollable View and just keep empty views with a Label in it, the screen is responsive.Does ListViews cause memory issues in the screen if they are heavy with different kinds of elements? Attaching the skeleton app which customer share with us which will help to understand how different components are used within the app.

Attachments

FileDateSize
appc.rtf2016-08-23T22:22:27.000+000066734
Bug.zip2016-12-06T23:20:42.000+000010474593
KeyTest.zip2016-08-23T22:25:22.000+000010475488
Simulator_Screen_Shot_Aug_12_2016_11.10.53_AM.png2016-08-23T22:24:36.000+0000150349

Comments

  1. Ingo Muschenetz 2016-12-01

    [~nmishra] We need a copy of the app that reproduces the problem with click events.
  2. Vijay Singh 2017-01-05

    PR: https://github.com/appcelerator/titanium_mobile/pull/8728
       var win = Titanium.UI.createWindow();
       
       var view = Titanium.UI.createView({
         height : 110,
         top : 20,
         backgroundColor : 'red'
       });
       
       view.addEventListener("click", function(e) {
         Ti.API.info('Clicked!');
         Ti.API.info(e.source);
       });
       
       
       var labelBGView = Titanium.UI.createView({
         backgroundColor : 'black',
         height: 100,
         width: 200
       });
       
       var label = Titanium.UI.createLabel({
         text : 'Click on the text',
         backgroundColor : 'green',
         height: 80,
       });
       
       
       labelBGView.add(label);
       view.add(labelBGView);
       
       win.add(view);
       win.open();
       
  3. Hans Knöchel 2017-01-05

    Second test-case (from TIMOB-23954):
       var index = Ti.UI.createWindow({
           layout: "vertical",
           backgroundColor: "white",
       });
       var viewContainer = Ti.UI.createView({
           layout: "vertical",
           backgroundColor: "white",
       });
        
       index.add(viewContainer);
        
       // Should also be triggered by it's childs
       index.addEventListener("click", function(e) {
           alert("clicked!");
           Ti.API.warn(e.source);
       });
        
       for (var i = 0; i < 10; i++) {
           var view = Ti.UI.createView({
               height: 40,
               backgroundColor: "red"
           });
           view.add(Ti.UI.createLabel({
               text: "Label " + i
           }));
           viewContainer.add(view);
       }
        
       index.open();
       
  4. Ricardo Pereira 2017-01-09

    I'm facing the same issue, most of my app views is a ScrollableView with bullets and each page has a ListView with templates. Even when the ListView is created and the user starts to scroll in it, if he tries to click in a item, it takes some seconds (I prevent this: if he click on multiple items, after that delay, it runs the itemclick event the same number of times that the user clicked on it) But when the ScrollableView and it's ListView's are created if the user wait that delay time, all events works properly. Problem: if I'm using a ScrollableView with 2 or 3 pages, each page has a ListView with 4 or more columns, it takes a lot of time to be ready (to handle events), because at this time it's possible to scroll on the ScrollableView and on their ListView's I've 24 templates because I've to cover all the cases for the number of the columns: !https://i.stack.imgur.com/hEEKK.png! !https://i.stack.imgur.com/ZnieY.png! In order to reach this result: !https://i.stack.imgur.com/dbpQU.png! !https://s29.postimg.org/cagj2hp9z/Screen_Shot_2017_01_09_at_15_58_18.png!
  5. Ricardo Pereira 2017-01-09

    I've made a sample video: [youtube sample video](https://youtu.be/_Mu-S-y_kjo) I've clicked on the several ListView items several times
  6. Eric Wieber 2017-01-09

    FR passed, merged. All click events were recognized on the views in the test cases. Also tested toggling main thread and auto layout. No click events failed to fire.
  7. Ricardo Pereira 2017-01-10

    [~ewieber], this change it's available in the nightly builds available today?
  8. Hans Knöchel 2017-01-10

    It is: http://builds.appcelerator.com/mobile/master/mobilesdk-6.1.0.v20170110020513-osx.zip
  9. Ricardo Pereira 2017-01-10

    [~hansknoechel] I've downloaded that sdk version this morning, an build the app with it, but the delay is still happening
  10. Ricardo Pereira 2017-01-10

    [~hansknoechel] and [~ewieber], I've created a simple app using these 2 elements (ScrollableView and ListView) please take a look at this: After creating the views, in the 'Try me' button, if you click on the rows and scroll to another page, there is a delay before calling the events, but every thing else is working fine. If there is any other event or function that's called before de delay time is over, it will be called after that delay. The more you click on 'Try me' the more it happens. [TIMOB-23810 Test APP](https://www.zipshare.com/download/eyJhcmNoaXZlSWQiOiIwZDUwZTgyZS01NDdkLTQwMjItYTgzZC1lMTg4ZWFhY2U5MjYiLCJlbWFpbCI6InJqY3BlcmVpcmFAb3V0bG9vay5wdCJ9) I can't add files to this ticket so I've updated the sample app tho zipshare, without assets
  11. Hans Knöchel 2017-01-10

    Hey Ricardo, the test-app cannot be used in it's state. We need a single isolated test-file like used above to test the changes. Your test-case currently also has a lot of unrelated code like database-queries and other UI. Are you the original reporter behind this ticket? Because using run-on-main-thread fixed the issue for the initial problem as I read the earlier comments. Also make sure you enabled the main-thread like recommended using <property name="run-on-main-thread" type="bool">true</property>.
  12. Ricardo Pereira 2017-01-11

    [~hansknoechel], Thanks again for your time, I'll do some more tests and create a single isolated file, if needed I'll create another ticket
  13. Abir Mukherjee 2017-01-13

    As reporter will open a new ticket, closing this one.
  14. Neeraj Mishra 2017-01-13

    [~hansknoechel]: Thanks, It works fine now.

JSON Source