Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-24138] Android: TextField/TextArea should not receive focus by default when a window is opened

GitHub Issuen/a
TypeBug
PriorityHigh
StatusClosed
ResolutionFixed
Resolution Date2018-07-03T12:07:57.000+0000
Affected Version/sn/a
Fix Version/sRelease 7.3.0
ComponentsAndroid
LabelsTextArea, TextField, android, focus, parity
ReporterPankaj Goyal
AssigneeJoshua Quick
Created2016-11-11T05:36:04.000+0000
Updated2018-07-03T21:40:28.000+0000

Description

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();

Comments

  1. Pankaj Goyal 2016-11-11

    We are getting same issue on Appc Latest SDK 5.5.1. Please look into this Thanks Pankaj Goyal
  2. Miguel Ángel Castaño 2016-12-19

    Same issue on 5.5.1 and 6.0.
  3. Joshua Quick 2018-06-30

    PR (master): https://github.com/appcelerator/titanium_mobile/pull/10145
  4. Michael Gangolf 2018-06-30

    Awesome! Means we finally don't need https://github.com/mpociot/TiAndroidAutofocus or show/hide workarounds on Android anymore!?
  5. Joshua Quick 2018-07-02

    [~michael], correct! :) This should provide a much better user experience now.
  6. Joshua Quick 2018-07-02

    PR (7.3.x): https://github.com/appcelerator/titanium_mobile/pull/10149
  7. Lokesh Choudhary 2018-07-03

    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

JSON Source