Thursday, May 23, 2013

TextField Focus Bug on Titanium Mobile Android

When using the TextField inside a TableView, I noticed that it would lose focus immediately after being selected but the keyboard remains shown. If you type anything on the keyboard, nothing gets displayed on the TextField. After a bit of tinkering, I was able to replicate this behavior with a simple code:
1:       var win1 = Ti.UI.createWindow({  
2:            navBarHidden : true,  
3:            top : 0,  
4:            left : 0,  
5:            right : 0,  
6:            bottom : 0  
7:       });  
8:       var subView = Ti.UI.createView({  
9:            backgroundColor : '#ffffff',  
10:            top : 0,  
11:            left : 0,  
12:            right : 0,  
13:            bottom : 0  
14:       });  
15:       win1.add(subView);  
16:       var _data = [];  
17:       var tableViewRow = Ti.UI.createTableViewRow({  
18:            height : '45dp',  
19:            left : 0,  
20:            right : 0  
21:       });  
22:       var textField = Ti.UI.createTextField({  
23:            top : '5dp',  
24:            left : '20dp',  
25:            right : '20dp',  
26:            height : '35dp'  
27:       });  
28:       tableViewRow.add(textField);  
29:       _data.push(tableViewRow);  
30:       var tableView = Ti.UI.createTableView({  
31:            backgroundColor : '#c0c0c0',  
32:            data : _data,  
33:            top : '10dp',  
34:            left : '20dp',  
35:            right : '20dp',  
36:            bottom : '10dp'  
37:       });  
38:       subView.add(tableView);  
39:       win1.open();  

After searching through the code, I was able to determine that the auto height adjustment is the cause for the problem. To fix the bug, you need to set the height property of the TableView to a fixed value:

1:       var tableView = Ti.UI.createTableView({  
2:            backgroundColor : '#c0c0c0',  
3:            data : _data,  
4:            top : '10dp',  
5:            left : '20dp',  
6:            right : '20dp',  
7:            height : '380dp'  
8:       });  
9:       subView.add(tableView);  

To view the complete source check here

As an update to this solution, I found out that while setting the height of the TableView fixes the focus bug, it also affects the view in a way such that, some TextFields near the bottom of the table becomes obstructed by the android keyboard whenever they are active:


In the picture above, I selected the row labeled TextField 30 but as you can see, it is not visible since the keyboard is obstructing it.

Since I cannot find a suitable fix with this problem on the TableView, I decided it is time to use the ScrollView instead:

From what I have tested, this fixes the focus bug on the TextField, while also having similar display to the TableView.

Complete source for the second application is here

1 comment:

  1. Thanks for the Solution! I was struggling with this all the morning.

    ReplyDelete