refactor: move dropdownMenu mouseleave special case to its own utility function

diff --git a/js/foundation.core.utils.js b/js/foundation.core.utils.js
index c70f989d5c3167d1bea4c19b8faaf3602afc6d68..6345a83dbc4858fa21f3f6bfd0fdaa450c07ca9b 100644 (file)
--- a/js/foundation.core.utils.js
+++ b/js/foundation.core.utils.js
@@ -90,4 +90,32 @@ function onLoad($elem, handler) {
   return eventType;
 }
 
-export {rtl, GetYoDigits, RegExpEscape, transitionend, onLoad};
+function onLeaveElement($elem, handler, { leaveWindow = true } = {}) {
+  const eventType = 'mouseleave.zf.util.onLeaveElement';
+
+  if ($elem && handler) {
+
+    $elem.on(eventType, function leaveHandler(e, ...rest) {
+      const _this = this;
+      setTimeout(function leaveEventDebouncer() {
+
+        if (e.relatedTarget === null && leaveWindow && document.hasFocus && document.hasFocus()) {
+
+          $(document).one('mouseenter', function reenterHandler(reeenterE) {
+            if ($elem.has(reeenterE.target).length) { return false };
+            e.relatedTarget = reeenterE.target;
+            handler.call(_this, e, ...rest);
+          });
+
+          return false;
+        }
+
+        handler.call(_this, e, ...rest);
+      });
+    });
+  }
+
+  return eventType;
+}
+
+export {rtl, GetYoDigits, RegExpEscape, transitionend, onLoad, onLeaveElement};

diff --git a/js/foundation.dropdownMenu.js b/js/foundation.dropdownMenu.js
index 7b4834e059db7df04ae377d8334da34dd507baa6..96f66fb13c2fb157457a3f5bd970a28e37146eda 100644 (file)
--- a/js/foundation.dropdownMenu.js
+++ b/js/foundation.dropdownMenu.js
@@ -2,7 +2,7 @@
 
 import $ from 'jquery';
 import { Plugin } from './foundation.core.plugin';
-import { rtl as Rtl } from './foundation.core.utils';
+import { rtl as Rtl, onLeaveElement } from './foundation.core.utils';
 import { Keyboard } from './foundation.util.keyboard';
 import { Nest } from './foundation.util.nest';
 import { Box } from './foundation.util.box';
@@ -139,17 +139,19 @@ class DropdownMenu extends Plugin {
     }
 
     if (!this.options.disableHover) {
-      this.$menuItems.on('mouseenter.zf.dropdownMenu', function(e) {
+      this.$menuItems.on('mouseenter.zf.dropdownMenu', function (e) {
         var $elem = $(this),
-            hasSub = $elem.hasClass(parClass);
+          hasSub = $elem.hasClass(parClass);
 
         if (hasSub) {
           clearTimeout($elem.data('_delay'));
-          $elem.data('_delay', setTimeout(function() {
+          $elem.data('_delay', setTimeout(function () {
             _this._show($elem.children('.is-dropdown-submenu'));
           }, _this.options.hoverDelay));
         }
-      }).on('mouseleave.zf.dropdownMenu', function(e) {
+      });
+
+      onLeaveElement(this.$menuItems, function (e) {
         var $elem = $(this),
             hasSub = $elem.hasClass(parClass);
         if (hasSub && _this.options.autoclose) {
@@ -157,19 +159,8 @@ class DropdownMenu extends Plugin {
 
           clearTimeout($elem.data('_delay'));
           $elem.data('_delay', setTimeout(function () {
-
-            // Ignore "magic mouseleave": when the mouse simply disapear from the document
-            // (like when entering in browser input suggestions See https://git.io/zf-11410),
-            // unless we actually left the window (and document lost focus).
-            //
-            // In firefox, document will not focus at the time the event is triggered, so we have
-            // to make this test after the delay.
-            if (e.relatedTarget === null && document.hasFocus && document.hasFocus()) { return false; }
-
             _this._hide($elem);
-
           }, _this.options.closingTime));
-
         }
       });
     }