fix: prevent double Keyboard events handling without stopping propagation

Stopping the event propagation prevent the user to watch for the event at an higher level. If it was needed to prevent a duplicate behavior in a component, others methods should be used like debouncing the event.

Changes:
- Save and check for `event.zfIsKeyHandled` in Keyboard utility to prevent to handle twice the same event in different components.
- Remove `event.stopPropagation` from components' keyboard handlers (Accordion, DropdownMenu, OffCanvas and Tabs).

See https://github.com/zurb/foundation-sites/issues/11457

diff --git a/js/foundation.accordion.js b/js/foundation.accordion.js
index 96571f998c76af5046720dccc9b3d7308fd9f875..67481c85d9b30d915288b1a16b075697205c1c57 100644 (file)
--- a/js/foundation.accordion.js
+++ b/js/foundation.accordion.js
@@ -139,7 +139,6 @@ class Accordion extends Plugin {
             },
             handled: function() {
               e.preventDefault();
-              e.stopPropagation();
             }
           });
         });

diff --git a/js/foundation.dropdownMenu.js b/js/foundation.dropdownMenu.js
index 7b4834e059db7df04ae377d8334da34dd507baa6..42303abfa094ef78cea62de736f941e850e22161 100644 (file)
--- a/js/foundation.dropdownMenu.js
+++ b/js/foundation.dropdownMenu.js
@@ -215,9 +215,6 @@ class DropdownMenu extends Plugin {
           _this._hide(_this.$element);
           _this.$menuItems.eq(0).children('a').focus(); // focus to first element
           e.preventDefault();
-        },
-        handled: function() {
-          e.stopImmediatePropagation();
         }
       };
 

diff --git a/js/foundation.offcanvas.js b/js/foundation.offcanvas.js
index 5a372f1fa6e306954cf64a0e4bcf723120ef9eeb..6a131741508eeb9e1891440db69922c7b2a09aae 100644 (file)
--- a/js/foundation.offcanvas.js
+++ b/js/foundation.offcanvas.js
@@ -484,7 +484,6 @@ class OffCanvas extends Plugin {
         return true;
       },
       handled: () => {
-        e.stopPropagation();
         e.preventDefault();
       }
     });

diff --git a/js/foundation.tabs.js b/js/foundation.tabs.js
index c8013f367db0f91c700137a7c32c49237d2620a2..47222fad6ad914879fd87f871b28a2ca17cd4709 100644 (file)
--- a/js/foundation.tabs.js
+++ b/js/foundation.tabs.js
@@ -208,7 +208,6 @@ class Tabs extends Plugin {
           _this._handleTabChange($nextElement);
         },
         handled: function() {
-          e.stopPropagation();
           e.preventDefault();
         }
       });

diff --git a/js/foundation.util.keyboard.js b/js/foundation.util.keyboard.js
index d7db4c52114ad33ab083718da1f96b6bc3a2882b..8c9732954ddd8267e588ff8d40ee7587d4950b5a 100644 (file)
--- a/js/foundation.util.keyboard.js
+++ b/js/foundation.util.keyboard.js
@@ -77,7 +77,11 @@ var Keyboard = {
 
     if (!commandList) return console.warn('Component not defined!');
 
-    if (typeof commandList.ltr === 'undefined') { // this component does not differentiate between ltr and rtl
+    // Ignore the event if it was already handled
+    if (event.zfIsKeyHandled === true) return;
+
+    // This component does not differentiate between ltr and rtl
+    if (typeof commandList.ltr === 'undefined') {
         cmds = commandList; // use plain list
     } else { // merge ltr and rtl: if document is rtl, rtl overwrites ltr and vice versa
         if (Rtl()) cmds = $.extend({}, commandList.ltr, commandList.rtl);
@@ -87,13 +91,20 @@ var Keyboard = {
     command = cmds[keyCode];
 
     fn = functions[command];
-    if (fn && typeof fn === 'function') { // execute function  if exists
+     // Execute the handler if found
+    if (fn && typeof fn === 'function') {
       var returnValue = fn.apply();
-      if (functions.handled || typeof functions.handled === 'function') { // execute function when event was handled
+
+      // Mark the event as "handled" to prevent future handlings
+      event.zfIsKeyHandled = true;
+
+      // Execute function when event was handled
+      if (functions.handled || typeof functions.handled === 'function') {
           functions.handled(returnValue);
       }
     } else {
-      if (functions.unhandled || typeof functions.unhandled === 'function') { // execute function when event was not handled
+       // Execute function when event was not handled
+      if (functions.unhandled || typeof functions.unhandled === 'function') {
           functions.unhandled();
       }
     }