[TIMOB-26172] Android: "focus" and "blur" events bubbles to parent views when it shouldn't
| GitHub Issue | n/a |
|---|---|
| Type | Bug |
| Priority | Medium |
| Status | Closed |
| Resolution | Fixed |
| Resolution Date | 2018-07-03T12:07:43.000+0000 |
| Affected Version/s | n/a |
| Fix Version/s | Release 7.3.0 |
| Components | Android |
| Labels | android, blur, bubble, focus, parity |
| Reporter | Joshua Quick |
| Assignee | Joshua Quick |
| Created | 2018-06-30T02:49:09.000+0000 |
| Updated | 2018-07-03T21:57:06.000+0000 |
Description
*Summary:*
A view's
focus and blur events are not supposed to bubble up to the view's parents according to our documentation here...
https://docs.appcelerator.com/platform/latest/#!/guide/Event_Handling-section-src-29004896_EventHandling-Bubblingandnon-bubblingevents
On Android, they do bubble up. This can cause confusion since these events will bubble up to the window which use the focus and blur events to indicate if the window is active, not if it has gained/received input focus.
This is not an issue on iOS.
*Steps to reproduce:*
Build and run the below code on Android.
If the TextField has the focus, then tap on the "Remove Focus" button.
Clear the Android log.
Tap on the "Set Focus" button.
In the log, notice that the TextField focus event's "bubbles" property is set true. This is wrong.
In the log, notice the Window received a focus event after the TextField did. This is wrong.
Tap on the "Remove Focus" button.
In the log, notice that the TextField blur event's "bubbles" property is set true. This is wrong.
In the log, notice the Window received a blur event after the TextField did. This is wrong.
var window = Ti.UI.createWindow({
layout: "vertical",
fullscreen: true,
});
var textField = Ti.UI.createTextField({
value: "Focus Test",
width: Ti.UI.FILL,
height: Ti.UI.SIZE,
});
textField.addEventListener("focus", function(e) {
Ti.API.info("@@@ TextField 'focus' event received. bubbles: " + e.bubbles);
});
textField.addEventListener("blur", function(e) {
Ti.API.info("@@@ TextField 'blur' event received. bubbles: " + e.bubbles);
});
window.add(textField);
var focusButton = Ti.UI.createButton({ title: "Set Focus" });
focusButton.addEventListener("click", function(e) {
textField.focus();
});
window.add(focusButton);
var blurButton = Ti.UI.createButton({ title: "Remove Focus" });
blurButton.addEventListener("click", function(e) {
textField.blur();
});
window.add(blurButton);
window.addEventListener("focus", function(e) {
Ti.API.info("@@@ Window 'focus' event received.");
});
window.addEventListener("blur", function(e) {
Ti.API.info("@@@ Window 'blur' event received.");
});
window.open();
focus and blur events should not not bubble. Their bubbles property should be false and the parent window should not have received the TextField's events.
*Work-Around:*
Set the focus and blur event's cancelBubble property to true to prevent the event from propagating up the view hierarchy.
var textField = Ti.UI.createTextField();
textField.addEventListener("focus", function(e) {
e.cancelBubble = true;
});
textField.addEventListener("blur", function(e) {
e.cancelBubble = true;
});
PR (master): https://github.com/appcelerator/titanium_mobile/pull/10145
PR (7.3.x): https://github.com/appcelerator/titanium_mobile/pull/10149
I'm suspecting this would happens on Windows too. I'll clone this ticket after checking on Windows.
Verified the fix in 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