Showing posts with label TextField. Show all posts
Showing posts with label TextField. Show all posts

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