[TIMOB-26177] Windows: "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-09-26T17:07:40.000+0000 |
| Affected Version/s | n/a |
| Fix Version/s | Release 7.5.0 |
| Components | Windows |
| Labels | blur, bubble, focus, parity |
| Reporter | Joshua Quick |
| Assignee | Kota Iguchi |
| Created | 2018-07-03T00:04:40.000+0000 |
| Updated | 2018-09-26T17:26:52.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 Windows, 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 Windows.
If the TextField has the focus, then tap on the "Remove Focus" button.
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",
});
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.
https://github.com/appcelerator/titanium_mobile_windows/pull/1276
FR Passed. PR merged
Verified the fix on SDK 7.5.0.v20180925150848.Focus and blur events not bubbles. Closing
Name = Microsoft Windows 10 Pro Version = 10.0.17134 Architecture = 64bit Node.js Node.js Version = 8.9.1 npm Version = 5.5.1 Titanium CLI CLI Version = 5.1.1 Titanium SDK SDK Version = 7.5.0.v20180925150848 Device Lumia 650 dual sim Mobile emulator 10.0.14393 1080p