Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-10800] iOS: TableView scrolls back to focused text field on scroll end

GitHub Issuen/a
TypeBug
PriorityHigh
StatusResolved
ResolutionHold
Resolution Date2014-08-19T21:45:34.000+0000
Affected Version/sRelease 2.0.2, Release 3.1.0, Release 3.2.0
Fix Version/s2013 Sprint 22, 2013 Sprint 22 API
ComponentsiOS
Labelslook1
ReporterDaniel Sefton
AssigneeVishal Duggal
Created2012-09-06T14:03:15.000+0000
Updated2017-03-24T18:25:13.000+0000

Description

*Code* http://pastie.org/4674079 *Expected Behaviour* The user should be able to scroll through the table without being taken back to focused textField. The textField should stay focused. *Actual Behaviour* TableView of textFields scrolls back to focussed text field on scroll end. *Notes* - Tested on iOS 5.1 - To Replicate the issue, click on textField in row 6 then once the textfield gains focus scroll down the table, as soon the scrolling ends it will take you back to row 6.

Attachments

FileDateSize
bug.js2014-05-21T09:33:11.000+00001330

Comments

  1. Shameer Jan 2013-03-26

    Issue reproduces Tested with Titanium Studio, build: 3.0.1.201212181159 Titanium SDK version: 3.1.0 Titanium SDK version: 3.0.2 iOS iPhone Simulator: iOS SDK version: 5.1, 6.0
  2. Daniel Sefton 2013-06-20

    More info at TIMOB-14258.
  3. Matej 2013-10-08

    Please can you set for this issue bigger priority? TableView with TextFields (Form) is often used and this bug is really, really very annoying. Users loses patience after few attempts, I am not going to learn users how to write text into TextFields.
  4. Vishal Duggal 2013-10-28

    Pull pending against master https://github.com/appcelerator/titanium_mobile/pull/4869
  5. Pragya Rastogi 2013-11-12

    Tested and Verified fix with : OSX: 10.8.5 Xcode:5.0 Appcelerator Studio: 3.2.0.201311112306 SDK: 3.2.0.v20131111174605 acs:1.0.7 alloy:1.3.0 npm:1.3.2 titanium:3.2.0 titanium-code-processo:1.0.3 Device: iOS7(v7.0.3)-iPodTouch1
  6. Matej 2014-02-22

    Hi, this bug is still not properly fixed and is unbelievably annoying. Unfortunately I have found that TableView scrolls back to focused TextField also after calling blur or showing optionDialog... More details in videos: http://www.filedropper.com/sh_2 Please fix it.
  7. Ingo Muschenetz 2014-02-22

    Please attach a test case with code that represents the problem and we'll be happy to reopen the issue.
  8. Matej 2014-02-22

    Everything is here: http://www.filedropper.com/sh_2
  9. Matej 2014-02-25

    *Ingo if you want to I can make reupload to somewhere else or send it to you... Just tell me, thanks
  10. Ingo Muschenetz 2014-02-25

    No--it's just very difficult for QE to work with .zip files hosted on other servers. Ideally, just attach something to the ticket here.
  11. Matej 2014-02-26

    The problem is that videos are quite big ,but that is the best way how to show where is the issue...
  12. Matej 2014-02-26

    The problem is that videos are quite big ,but that is the best way how to show where is the issue... 
        var win = Ti.UI.createWindow({
        backgroundColor : "#FFF"
    });
    var table = Ti.UI.createTableView();
    var data = [];
     
    for (var i = 0; i < 30; i++) {
        var row = Ti.UI.createTableViewRow({
            width : Ti.UI.FILL,
            height : Ti.UI.FILL
        });
        var tField = Ti.UI.createTextField({
            width : "90%",
            height : Ti.UI.FILL,
            backgroundColor : "gray"
        });
     
        row.add(tField);
        data.push(row);
    }
     
    table.data = data;
     
    win.add(table);
    win.open();
    
    
    
    /* 2
    var seconds = 0;
    
    setInterval(function(){
        var time = seconds % 10;
    
        if(!time && seconds > 0)
        {
            var optionDialog = Ti.UI.createOptionDialog({
                options: ["Cancel"],
                cancel: 0
            });
    
            optionDialog.show();
        }
    
        console.log(time);
        seconds++;
    }, 1000);
    */
    
    
    /* 3
    var seconds = 0;
    
    setInterval(function(){
        var time = seconds % 10;
    
        if(!time && seconds > 0)
        {
            data.forEach(function(row){
                var textField = row.children[0];
                    textField.blur();
            });
        }
    
        console.log(time);
        seconds++;
    }, 1000);
    */
  13. Matej 2014-03-04

    Please can somebody have a look at this issue? It is not fixed at all.
  14. Ingo Muschenetz 2014-03-04

    Reopening for re-review based on comments.
  15. Kajenthiran Velummaylum 2014-05-20

    The TableView scroll works as expected. The issue is *not reproducible* using the sample codes mentioned in Description section as well as given by Matej. *Test Environment:* || *Component* || *Version* || | Appcelerator Studio | 3.3.0.201405161313 | | Titanium SDK | 3.3.0.v20140516180912 | | Alloy | 1.4.0-alpha | | CLI | 3.3.0-alpha3 | | ACS | 1.0.14 | | NPM | 1.4.10 | | Titanium-Code-Processor | 1.1.1 | | Node-ACS | 1.0.14 | | OS | OS X 10.9.2 | | Device | iPhone 5S (iOS 7.1.1) | | Xcode | 5.1.1 (5B1008) |
  16. Matej 2014-05-20

    Please try it one more time. You can find the sample code & videos in the attachted archive that is here http://www.filedropper.com/sh_2. Thank you
  17. Kajenthiran Velummaylum 2014-05-21

    Thank you Matej. The issue is *reproducible.* Resources in the attachment (given by Matej) is used for testing purpose. Please use attached code bug.js to identify the code used for each scenario of testing. {panel:title=Scenario 1 (Referring the video 1.mov)|borderStyle=dashed|borderColor=#ccc|titleBGColor=#F7D6C1|bgColor=#FFFFCE} - Open the app first time - Click on a text field and ensure the focus of curser (top portion of the table) - Scroll up to somewhere else ( to see the bottom part of the table). - *As soon as scroll ends, the focused text field come back to previous position.* - If you do this again without blurring all the text fields, it will not happen next time. {color:blue} More observations: {color} - Cancel the keyboard in order to blur all the text field. - Follow the same again, You can reporduce the same situation again. - Issue is not reproducible with scroll down scenario (only scroll up shows such behaviour). - If you delay after clicking on a text field before scrolling up, Scenariou cannot be observed. {panel} {panel:title=Scenario 2 (Referring the video 2.mov)|borderStyle=dashed|borderColor=#ccc|titleBGColor=#F7D6C1|bgColor=#FFFFCE} - This scenario describe the situation more clearly - Follow the step as in Scenario 1, it reproduce the issue. - After the time interval, it pops up the option dialog. - *If you click this cancel, it goes to the focused text field automatically.* {panel} {panel:title=Scenario 3 (Referring the video 3.mov)|borderStyle=dashed|borderColor=#ccc|titleBGColor=#F7D6C1|bgColor=#FFFFCE} - Follow the step as in Scenario 1 or 2, it reproduce the issue. - It blur all the text fiels after some time interval, So scenario is more observable here. {panel} *Test Environment:* || *Component* || *Version* || | Appcelerator Studio | 3.3.0.201405161313 | | Titanium SDK | 3.3.0.v20140520141136 | | Alloy | 1.4.0-alpha2 | | CLI | 3.3.0-alpha4 | | ACS | 1.0.14 | | NPM | 1.4.10 | | Titanium-Code-Processor | 1.1.1 | | Node-ACS | 1.0.14 | | OS | OS X 10.9.2 | | Device | iPhone 5S (iOS 7.1.1) |
  18. Matej 2014-08-06

    Still nothing about this issue? Seriously guys, this is the most annoying bug. The biggest problem is that I use "interactive" form in other words user may add/remove sections with a specific textfields. Sometimes whole app crash because of this scrolling...
  19. Pedro Enrique 2014-08-19

    Scenario 1: Valid: I can reproduce some times. Scenario 2: Invalid: When the option dialog looses focus, the field that owns the keyboard gains focus and the system scrolls the scrolling area, in this case the tableview, to that UI component. This is done by the system. Scenario 3: Invalid: Very similar to scenario two. By calling "blur" on a field, the system will scroll the scrolling to make it visible. This is also done by the system I will create a simple test case using ListView and see how that behaves. Today, ListView is the preferred component to show a list of items, instead of TableView.
  20. Pedro Enrique 2014-08-19

    Ok, research done. Tested on a native app and it surprised me. If you're building a native obejcte-c app you have to take care of a lot of things that you get for free with Titanium. Short story: Race condition, and fixing this will break almost every other app that uses a textfield in a scroll view or any of it's subclasses. (table view, list view, scroll view) Long story: Whenever a keyboard has a change, such is "is about to come up", "it came up", "the device is rotating so it's going to change size and position", etc... we run some code to compensate for that. We check if that field is in a scrolling view and if so we scroll to that place. If the scrolling view extends passed the bottom of the keyboard and is no longer visible, we make the scrolling area bigger and place it on top of the keyboard. We do this to make it easy for the developer. We're doing a lot of things you would do as a native developer so you don't need to think about it. What's happening in this particular case is the following: 1. the field is focused 2. the keyboard is about to come up 3. the tableview's scrolling area is enlarged and scrolled to the focused field 4. the keyboard is coming up 5. you scroll quickly before the keyboard's "came up" internal event is triggered 6. the keyboard came up, but table view is still scrolling..., so that even is queued 7. the table view ended scrolling, the queued event is triggered 8. the tableview scrolls to the position of the field. (same as 3) Similar things would happen if, for example, the device is rotated and the window has orientationModes set and the keyboard is up. About the options dialog. When it's dismissed we tell the root view controller about it. The root view controller finds the previous focused component and tell it to regain focus again. In this case it happened to be a text field in a table view row. So the chain reaction stars and we're back at square one. We're going to investigate on how to properly fix this.
  21. Matej 2014-08-19

    Hi Pedro. Firstly, I am not really sure whether is good idea to replace a TableView with a ListView. Yes, a ListView is great if you have to display many rows ,but for a form (rows that contains textfields) is better-simpler to use a TableView. (That's just my opinion). I have got for you another scenario. Just run the app then click (focus) for example the first TextField (row) and scroll completely down - to the end. Stay there and wait for the setTimeout, the TableView should scroll to the top after the section is inserted. As I mentioned above I have got a form that works in similar way (in the bottom is a button for adding a section). If a user is manipulating faster (e.g. immediately scrolling back down to the section...) sometimes the whole app just crash. That's not good at all. 
        var win = Ti.UI.createWindow({
        backgroundColor : "#FFF"
    });
    
    var table = Ti.UI.createTableView();
    
    var section_1 = Ti.UI.createTableViewSection({headerTitle: "SECTION_1"}),
    	section_2 = Ti.UI.createTableViewSection({headerTitle: "SECTION_2"});
     
    [section_1, section_2].forEach(function(section) {
    	var data = [];
    	
    	for (var i = 0; i < 25; i++) {
    	    var row = Ti.UI.createTableViewRow({
    	        width: Ti.UI.FILL, height: Ti.UI.FILL
    	    });
    	    
    	    var tField = Ti.UI.createTextField({
    	        width: "90%", height: Ti.UI.FILL
    	    });
    	 
    	    row.add(tField);
    	    section.add(row);
    	}
    });
     
    table.data = [section_1];
     
    win.add(table);
    win.open();
    
    setTimeout(function() {
    	table.insertSectionAfter(0, section_2);
    }, 6000);
  22. Matej 2014-10-02

JSON Source