fix: avoid stopping event propagation when not necessary

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:
- Remove `stopPropagation` and `stopImmediatePropagation` from everywhere we do not want to cancel the event (AccordionMenu, Drilldown, DropdownMenu, Tabs, Tooltip).
- Update `DropdownMenu._removeBodyHandler` to also ignore click events on the element itself.

Others changes:
- Clean up `DropdownMenu._events` a bit.
- Add explainaitions where `stopPropagation` is still used (Triggers).

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

diff --git a/js/foundation.accordionMenu.js b/js/foundation.accordionMenu.js
index b99c5245b24033c671aa670b2fe3d40b9c9286dd..295705d1d5963fcb54877c1028f2f1284dbdf87f 100644 (file)
--- a/js/foundation.accordionMenu.js
+++ b/js/foundation.accordionMenu.js
@@ -190,7 +190,6 @@ class AccordionMenu extends Plugin {
           if (preventDefault) {
             e.preventDefault();
           }
-          e.stopImmediatePropagation();
         }
       });
     });//.attr('tabindex', 0);

diff --git a/js/foundation.drilldown.js b/js/foundation.drilldown.js
index 9deaf3272f423641e005824f89f461e8d5f0fc54..18a04ded2e22d34f9688b3ccb7234cdc015e98dc 100644 (file)
--- a/js/foundation.drilldown.js
+++ b/js/foundation.drilldown.js
@@ -153,7 +153,6 @@ class Drilldown extends Plugin {
     $elem.off('click.zf.drilldown')
     .on('click.zf.drilldown', function(e){
       if($(e.target).parentsUntil('ul', 'li').hasClass('is-drilldown-submenu-parent')){
-        e.stopImmediatePropagation();
         e.preventDefault();
       }
 
@@ -285,7 +284,6 @@ class Drilldown extends Plugin {
           if (preventDefault) {
             e.preventDefault();
           }
-          e.stopImmediatePropagation();
         }
       });
     }); // end keyboardAccess
@@ -320,7 +318,6 @@ class Drilldown extends Plugin {
     $elem.off('click.zf.drilldown');
     $elem.children('.js-drilldown-back')
       .on('click.zf.drilldown', function(e){
-        e.stopImmediatePropagation();
         // console.log('mouseup on back');
         _this._hide($elem);
 
@@ -342,7 +339,6 @@ class Drilldown extends Plugin {
     this.$menuItems.not('.is-drilldown-submenu-parent')
         .off('click.zf.drilldown')
         .on('click.zf.drilldown', function(e){
-          // e.stopImmediatePropagation();
           setTimeout(function(){
             _this._hideAll();
           }, 0);

diff --git a/js/foundation.dropdownMenu.js b/js/foundation.dropdownMenu.js
index 42303abfa094ef78cea62de736f941e850e22161..338cf5c9f3791ce58e9e6725bb378e652b812693 100644 (file)
--- a/js/foundation.dropdownMenu.js
+++ b/js/foundation.dropdownMenu.js
@@ -108,15 +108,16 @@ class DropdownMenu extends Plugin {
 
       if (hasSub) {
         if (hasClicked) {
-          if (!_this.options.closeOnClick || (!_this.options.clickOpen && !hasTouch) || (_this.options.forceFollow && hasTouch)) { return; }
-          else {
-            e.stopImmediatePropagation();
-            e.preventDefault();
-            _this._hide($elem);
+          if (!_this.options.closeOnClick
+            || (!_this.options.clickOpen && !hasTouch)
+            || (_this.options.forceFollow && hasTouch)) {
+            return;
           }
-        } else {
           e.preventDefault();
-          e.stopImmediatePropagation();
+          _this._hide($elem);
+        }
+        else {
+          e.preventDefault();
           _this._show($sub);
           $elem.add($elem.parentsUntil(_this.$element, `.${parClass}`)).attr('data-is-click', true);
         }
@@ -283,8 +284,8 @@ class DropdownMenu extends Plugin {
     const $body = $(document.body);
     this._removeBodyHandler();
     $body.on('click.zf.dropdownMenu tap.zf.dropdownMenu', (e) => {
-      var $link = this.$element.find(e.target);
-      if ($link.length) return;
+      var isItself = this.$element.andSelf().find(e.target).length;
+      if (isItself) return;
 
       this._hide();
       this._removeBodyHandler();

diff --git a/js/foundation.tabs.js b/js/foundation.tabs.js
index 47222fad6ad914879fd87f871b28a2ca17cd4709..1b191366c12af30b4acae3248a09d95ad09942a6 100644 (file)
--- a/js/foundation.tabs.js
+++ b/js/foundation.tabs.js
@@ -159,7 +159,6 @@ class Tabs extends Plugin {
       .off('click.zf.tabs')
       .on('click.zf.tabs', `.${this.options.linkClass}`, function(e){
         e.preventDefault();
-        e.stopPropagation();
         _this._handleTabChange($(this));
       });
   }

diff --git a/js/foundation.tooltip.js b/js/foundation.tooltip.js
index 41f99d4fbf56ccfd5490e1b49f5964874e873f94..82ecc428227e198f47ed783bb55ddceaf782b339 100644 (file)
--- a/js/foundation.tooltip.js
+++ b/js/foundation.tooltip.js
@@ -225,7 +225,6 @@ class Tooltip extends Positionable {
 
     if (this.options.clickOpen) {
       this.$element.on('mousedown.zf.tooltip', function(e) {
-        e.stopImmediatePropagation();
         if (_this.isClick) {
           //_this.hide();
           // _this.isClick = false;
@@ -238,7 +237,6 @@ class Tooltip extends Positionable {
       });
     } else {
       this.$element.on('mousedown.zf.tooltip', function(e) {
-        e.stopImmediatePropagation();
         _this.isClick = true;
       });
     }

diff --git a/js/foundation.util.triggers.js b/js/foundation.util.triggers.js
index 55e1fc306bd314bffd79356ecaae9e22c68ae914..e1097873412de9c2c9d456d2a4d1cb77827348f2 100644 (file)
--- a/js/foundation.util.triggers.js
+++ b/js/foundation.util.triggers.js
@@ -50,9 +50,11 @@ Triggers.Listeners.Basic  = {
     }
   },
   closeableListener: function(e) {
-    e.stopPropagation();
     let animation = $(this).data('closable');
 
+    // Only close the first closable element. See https://git.io/zf-7833
+    e.stopPropagation();
+
     if(animation !== ''){
       Motion.animateOut($(this), animation, function() {
         $(this).trigger('closed.zf');