Uploaded image for project: 'Titanium SDK/CLI'
  1. Titanium SDK/CLI
  2. TIMOB-26172

Android: "focus" and "blur" events bubbles to parent views when it shouldn't

    Details

    • Story Points:
      3
    • Sprint:
      2018 Sprint 13 SDK, 2018 Sprint 14 SDK

      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:

      1. Build and run the below code on Android.
      2. If the TextField has the focus, then tap on the "Remove Focus" button.
      3. Clear the Android log.
      4. Tap on the "Set Focus" button.
      5. In the log, notice that the TextField focus event's "bubbles" property is set true. This is wrong.
      6. In the log, notice the Window received a focus event after the TextField did. This is wrong.
      7. Tap on the "Remove Focus" button.
      8. In the log, notice that the TextField blur event's "bubbles" property is set true. This is wrong.
      9. 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();
      

      Expected Result:
      The 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;
      });
      

        Attachments

          Issue Links

            Activity

              People

              • Assignee:
                jquick Joshua Quick
                Reporter:
                jquick Joshua Quick
                Reviewer:
                Gary Mathews
              • Watchers:
                3 Start watching this issue

                Dates

                • Created:
                  Updated:
                  Resolved:

                  Backbone Issue Sync

                  • Titanium SDK/CLI <> Titanium Mobile
                    Synced with:
                    TIMOB-6434
                    Sync status:
                    ERROR
                    Last received:
                    Last sent:

                    Git Source Code