Prevent bubbling of events on disabled form elements (issue Financial…

…-Times#73)
orangemug · Sep 29, 2016 · 0a805ea · 0a805ea
1 parent 0c8d5ce
commit 0a805ea
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 11 deletions.
diff --git a/lib/delegate.js b/lib/delegate.js
@@ -294,6 +294,8 @@ Delegate.prototype.handle = function(event) {
     break;
   }
 
+  var toFire = [];
+
   // Need to continuously check
   // that the specific list is
   // still populated in case one
@@ -312,23 +314,22 @@ Delegate.prototype.handle = function(event) {
         break;
       }
 
+      if(
+        target.tagName &&
+        ["button", "input", "select", "textarea"].indexOf(target.tagName.toLowerCase()) > -1 &&
+        target.hasAttribute("disabled")
+      ) {
+        // Remove things that have previously fired
+        toFire = [];
+      }
       // Check for match and fire
       // the event if there's one
       //
       // TODO:MCG:20120117: Need a way
       // to check if event#stopImmediatePropagation
       // was called. If so, break both loops.
-      if (listener.matcher.call(target, listener.matcherParam, target)) {
-        returned = this.fire(event, target, listener);
-      }
-
-      // Stop propagation to subsequent
-      // callbacks if the callback returned
-      // false
-      if (returned === false) {
-        event[EVENTIGNORE] = true;
-        event.preventDefault();
-        return;
+      else if (listener.matcher.call(target, listener.matcherParam, target)) {
+        toFire.push([event, target, listener]);
       }
     }
 
@@ -344,6 +345,23 @@ Delegate.prototype.handle = function(event) {
     l = listenerList.length;
     target = target.parentElement;
   }
+
+  for(i=0; i<toFire.length; i++) {
+    // Has it been removed during while the event function was fired
+    if(listenerList.indexOf(toFire[i][2]) < 0) {
+      continue;
+    }
+    returned = this.fire.apply(this, toFire[i]);
+
+    // Stop propagation to subsequent
+    // callbacks if the callback returned
+    // false
+    if (returned === false) {
+      toFire[i][0][EVENTIGNORE] = true;
+      toFire[i][0].preventDefault();
+      return false;
+    }
+  }
 };
 
 /**

diff --git a/test/tests/delegateTest.js b/test/tests/delegateTest.js
@@ -19,6 +19,8 @@ setupHelper.setUp = function() {
     + '<svg viewBox="0 0 120 120" version="1.1" xmlns="http://www.w3.org/2000/svg">'
       + '<circle id="svg-delegate-test-clickable" cx="60" cy="60" r="50"/>'
     + '</svg>'
+    + '<button disabled="true" id="btn-disabled">Normal</button>'
+    + '<button disabled="true" id="btn-disabled-alt"><i id="btn-disabled-alt-label">With label</i></button>'
   );
 };
 
@@ -604,6 +606,27 @@ buster.testCase('Delegate', {
     assert.calledOnce(bubbleSpy);
   },
 
+  'Disabled buttons don\'t trigger click' : function() {
+    var delegate = new Delegate(document);
+    var spy = this.spy();
+
+    delegate.on('click', '#btn-disabled', spy);
+    var element = document.getElementById("btn-disabled");
+
+    setupHelper.fireMouseEvent(element, "click");
+    refute.called(spy);
+  },
+  'Disabled buttons with inner element don\'t trigger click' : function() {
+    var delegate = new Delegate(document);
+    var spy = this.spy();
+
+    delegate.on('click', '#btn-disabled-alt-label', spy);
+    var element = document.getElementById("btn-disabled-alt-label");
+
+    setupHelper.fireMouseEvent(element, "click");
+    refute.called(spy);
+  },
+
   'tearDown': function() {
     setupHelper.tearDown();
   }