[TIMOB-2907] iOS / iPad: Focus on Textfields inside a table

To reproduce the first video:

   var win = Titanium.UI.currentWindow;
   
   var rows = [];
   
   for (var i=0; i < 5; i++) {
       var row = Ti.UI.createTableViewRow();
   
       var textfield = Ti.UI.createTextField({
           color:'#336699',
           height:35,
           width:300,
           borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED
       });
   
       row.add(textfield);
   
       rows.push(row);
   }
   
   var tableview = Ti.UI.createTableView({
       data: rows
   });
   
   win.add(tableview);
   

To reproduce the second video, use the code below. Note: When the textfield is focused, click the set data button - the table will fly out of sight.

   var win = Titanium.UI.currentWindow;
   
   var rows = [];
   
   var tableview = Ti.UI.createTableView();
   
   for (var i=0; i < 5; i++) {
       var row = Ti.UI.createTableViewRow();
   
       var textfield = Ti.UI.createTextField({
           color:'#336699',
           height:35,
           width:300,
           borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED
       });
   
       row.add(textfield);
   
       rows.push(row);
   }
   
   var button = Ti.UI.createButton({
       title: 'test',
       width: 100,
       height: 50,
       right: 10,
       top: 10
   });
   
   button.addEventListener('click', function() {
       setTimeout(function() {
           tableview.setData(rows, { animationStyle:Titanium.UI.iPhone.RowAnimationStyle.TOP });
       }, 1000);   
   });
   
   win.add(tableview);
   win.add(button);
   

To Update This Ticket: Quickstart customer is still having issues with this even with the setData()'s second arg not passed or set to null. Here's a video of it in action: http://screencast.com/t/toWTDJCmL0oF">http://screencast.com/t/toWTDJCmL0oF . Pressing 'tab' on the sim or the 'return' button on the sim's keyboard will do this every time. In the video's particular case, it's a modal with a 'Ti.UI.iPhone.MODAL_PRESENTATION_FORMSHEET' style set to it - however this happens in a normal window as well.

I think this is related to an issue I'm seeing with textFields in tableViewRows on the iPhone too - which ONLY happens when the tableView is in a modal window.

See HelpDesk ticket : http://developer.appcelerator.com/helpdesk/view/76164">http://developer.appcelerator.com/helpdesk/view/76164

And Q&A discussion : http://developer.appcelerator.com/question/116461/tableview-with-textfields-moving-in-160"> http://developer.appcelerator.com/question/116461/tableview-with-te...

Here's another code sample to demonstrate the issue. This example simulates the scenario one of our quickstart customer's are doing - resetting the table's data upon return / tab. In our customer's case they might have additional fields they want to show as a user is filling out a form. insertRow() could be used but in some cases the entire table data needs to be reset (using setData()).

You'll notice the first time you hit return it will fly out because of the new data. Subsequent tries will not cause the table to fly out.

   var win = Titanium.UI.currentWindow;
   
   var btn = Ti.UI.createButton({
       title: 'Button Here',
       width: 200,
       height: 100,
       top: 10
   });
   
   btn.addEventListener('click', function() {
       var newwin = Ti.UI.createWindow({
           title: 'Test',
           modalTransitionStyle: Ti.UI.iPhone.MODAL_TRANSITION_STYLE_FLIP_HORIZONTAL,
           modalStyle: Ti.UI.iPhone.MODAL_PRESENTATION_FORMSHEET,
           width: 400,
           height: 600
       });
       
       var rows        = [],
           tableview   = Ti.UI.createTableView(),
           row         = Ti.UI.createTableViewRow();
   
           var textfield = Ti.UI.createTextField({
               color:'#336699',
               value: 'Flying tables away',
               width: 300,
               height: 35,
               borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED
           });
   
           row.add(textfield);
           rows.push(row);
           tableview.setData(rows);
   
       textfield.addEventListener('return', function() {
           var newrows = [];       
           for(var i = 0; i < 3; i++) {
               var newrow = Ti.UI.createTableViewRow();
   
               var newtextfield = Ti.UI.createTextField({
                   color:'#336699',
                   value: 'Flying tables away',
                   width: 300,
                   height: 35,
                   borderStyle:Titanium.UI.INPUT_BORDERSTYLE_ROUNDED
               });
               newrow.add(newtextfield);
               newrows.push(newrow);           
           }
           tableview.setData(newrows);
       }); 
       
       newwin.add(tableview);
       newwin.open({modal: true});
   });
   
   win.add(btn);
   

Not only iPad-related. This happens on iPhone too. See https://appcelerator.lighthouseapp.com/projects/32238/tickets/3354-textview-within-tableviewrow-scrollingjumping-when-focussed"> Ticket #3354 for more details and how to reproduce…

(from [f51f1e1a643cfe556882785e9a683698ad704070]) [#3354 state:fixed-in-qa] [#2907 state:fixed-in-qa] It feels good to find a one-liner fix after doing all these deep changes (offset should never be negative) https://github.com/appcelerator/titanium_mobile/commit/f51f1e1a643cfe556882785e9a683698ad704070"> https://github.com/appcelerator/titanium_mobile/commit/f51f1e1a643c...

Tested the latest build on March 17th - This resolves the above issues. Great job!

Tested with Titanium SDK version: 1.7.0 (03/18/11 12:00 19be393) on
iPad2 4.3

Click on first text field type stuff in and hit enter
2 more text field appears and the fields are reset