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
Thanks for the Solution! I was struggling with this all the morning.
ReplyDelete