MDL-70075 core: Listen for the `focus` and `blur` events again
authorAndrew Nicols <andrew@nicols.co.uk>
Mon, 2 Nov 2020 00:12:22 +0000 (08:12 +0800)
committerAndrew Nicols <andrew@nicols.co.uk>
Wed, 4 Nov 2020 03:27:55 +0000 (11:27 +0800)
The `blur` event does not bubble, but the `focusout` events are not
available in all supported versions of Firefox.

Rather than switching event, this patch using event capture to
effectively achieve the same result and bubble the event up through the
DOM to the delegated listener.

There should be no functional change with this patch, except to support
Firefox fully.

lib/amd/build/custom_interaction_events.min.js
lib/amd/build/custom_interaction_events.min.js.map
lib/amd/src/custom_interaction_events.js

index fdf405e..2e6312a 100644 (file)
Binary files a/lib/amd/build/custom_interaction_events.min.js and b/lib/amd/build/custom_interaction_events.min.js differ
index 2ca3bca..a603b95 100644 (file)
Binary files a/lib/amd/build/custom_interaction_events.min.js.map and b/lib/amd/build/custom_interaction_events.min.js.map differ
index 84f09d2..c429e92 100644 (file)
@@ -431,16 +431,18 @@ define(['jquery', 'core/key_codes'], function($, keyCodes) {
                 triggerEvent(events.accessibleChange, e);
             });
         } else {
-            element.on('focusin', function(e) {
+            var nativeElement = element.get()[0];
+            // The `focus` and `blur` events do not support bubbling. Use Event Capture instead.
+            nativeElement.addEventListener('focus', function(e) {
                 $(e.target).data('initValue', e.target.value);
-            });
-            element.on('focusout', function(e) {
+            }, true);
+            nativeElement.addEventListener('blur', function(e) {
                 var initValue = $(e.target).data('initValue');
                 $(e.target).removeData('initValue');
                 if (e.target.value !== initValue) {
                     triggerEvent(events.accessibleChange, e);
                 }
-            });
+            }, true);
             element.on('keydown', function(e) {
                 if ((e.which === keyCodes.enter) && e.target.value !== $(e.target).data('initValue')) {
                     triggerEvent(events.accessibleChange, e);