Behavior
It seems that "focus" event doesn't work well on Android and this behavior cause awful user experience. To see the issue, run the test case below.
Scroll to the bottom, but don't touch text fields. You'll see in the console output that text field fired "focus" event and that keyboard has shown on the screen.
Also, scroll to the bottom, click "Click me!" button to open new window. Then, click "Close me!" button. ScrollView should be scrolled up to the text field that has "focus" (gained by a bug described above!), which creates awful user experience because user needs to scroll back to where he was before opening new window (ScrollView should not scroll after returning from newly created window).
Test case
var win = Ti.UI.createWindow({
backgroundColor: '#000',
modal: true,
navBarHidden: true,
layout: 'vertical'
});
function createItem() {
var view = Ti.UI.createView({
height: 100,
width: '100%',
layout: 'horizontal'
});
var label = Ti.UI.createLabel({
text: 'Testing ...',
width: '50%'
});
var checkbox = Ti.UI.createSwitch({
style: Ti.UI.Android.SWITCH_STYLE_CHECKBOX
});
view.add(label);
view.add(checkbox);
return view;
}
function createTextField() {
var view = Ti.UI.createView({
height: 100,
width: '100%',
backgroundColor: '#0ff',
layout: 'horizontal'
});
var label = Ti.UI.createLabel({
text: 'Text field ...',
width: '50%'
});
var textField = Ti.UI.createTextField({
width: '30%'
});
textField.addEventListener('focus', function() {
Ti.API.info('Focus fired');
});
view.add(label);
view.add(textField);
return view;
}
var scrollView = Ti.UI.createScrollView({
layout: 'vertical',
backgroundColor: '#f00',
showVerticalScrollIndicator: true,
height: '100%',
width: '100%',
contentHeight: 'auto',
contentWidth: 'auto',
top: 0
});
for (var m = 0; m < 3; ++m) {
for (var i = 0; i < 20; ++i) {
scrollView.add(createItem());
}
var view = createTextField();
scrollView.add(view);
}
for (var j = 0; j < 20; ++j) {
scrollView.add(createItem());
}
var button = Ti.UI.createButton({ title: 'Click me!' });
button.addEventListener('click', function() {
var context = Ti.UI.createWindow({
backgroundColor: '#000',
modal: true,
navBarHidden: true,
layout: 'vertical'
});
var closeButton = Ti.UI.createButton({ title: 'Close me!' });
closeButton.addEventListener('click', function() {
context.close();
});
context.add(closeButton);
context.open();
});
scrollView.add(button);
win.add(scrollView);
Ti.API.info('App runnning ...');
win.open();
We are getting same issue on Appc Latest SDK 5.5.1. Please look into this Thanks Pankaj Goyal
Same issue on 5.5.1 and 6.0.
PR (master): https://github.com/appcelerator/titanium_mobile/pull/10145
Awesome! Means we finally don't need https://github.com/mpociot/TiAndroidAutofocus or show/hide workarounds on Android anymore!?
[~michael], correct! :) This should provide a much better user experience now.
PR (7.3.x): https://github.com/appcelerator/titanium_mobile/pull/10149
Verified the fix with SDK 7.3.0.v20180703051211. Closing. Studio Ver: 5.1.0.201806291005 SDK Ver: 7.3.0.v20180703051211 OS Ver: 4.2.13 Xcode Ver: 7.0.4 Appc NPM: 1.1.3 Appc CLI: 10.13.5 Daemon Ver: Xcode 9.4.1 Ti CLI Ver: 5.1.1 Alloy Ver: 1.12.0 Node Ver: 8.9.1 NPM Ver: 5.5.1 Java Ver: 10.0.1 Devices: ⇨ google Nexus 5 --- Android 6.0.1 ⇨ google Nexus 6P --- Android 8.1.0 Emulator: ⇨ Android 4.1.2