MDL-70075 core: Listen for the `focus` and `blur` events again

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.

diff --git a/lib/amd/build/custom_interaction_events.min.js b/lib/amd/build/custom_interaction_events.min.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

diff --git a/lib/amd/build/custom_interaction_events.min.js.map b/lib/amd/build/custom_interaction_events.min.js.map
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

diff --git a/lib/amd/src/custom_interaction_events.js b/lib/amd/src/custom_interaction_events.js
index 84f09d2..c429e92 100644 (file)
--- a/lib/amd/src/custom_interaction_events.js
+++ b/lib/amd/src/custom_interaction_events.js
@@ -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);