Merge pull request #17874 from simonihmig/fix-stop-propagation

[BUGFIX beta] Fix no-jQuery EventDispatcher to prevent events bubbling up when event.stopPropagation() was called
emberjs · Apr 7, 2019 · fb416b0 · fb416b0
2 parents 7da998b + 561759e
commit fb416b0
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 29 deletions.
diff --git a/...ages/@ember/-internals/glimmer/tests/integration/components/link-to/routing-angle-test.js b/...ages/@ember/-internals/glimmer/tests/integration/components/link-to/routing-angle-test.js
@@ -8,7 +8,6 @@ import { alias } from '@ember/-internals/metal';
 import { subscribe, reset } from '@ember/instrumentation';
 import { Route, NoneLocation } from '@ember/-internals/routing';
 import { EMBER_IMPROVED_INSTRUMENTATION } from '@ember/canary-features';
-import { jQueryDisabled } from '@ember/-internals/views';
 
 if (EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS) {
   // IE includes the host name
@@ -882,12 +881,7 @@ if (EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS) {
           .then(() => {
             assert.equal(this.$('#contact').text(), 'Contact', 'precond - the link worked');
 
-            if (jQueryDisabled) {
-              // BUG: https://github.com/emberjs/ember.js/issues/17840
-              assert.equal(hidden, 1, 'The link bubbled anyway');
-            } else {
-              assert.strictEqual(hidden, 0, "The link didn't bubble");
-            }
+            assert.equal(hidden, 0, "The link didn't bubble");
           });
       }
 
@@ -938,13 +932,7 @@ if (EMBER_GLIMMER_ANGLE_BRACKET_BUILT_INS) {
           })
           .then(() => {
             assert.equal(this.$('#contact').text(), 'Contact', 'precond - the link worked');
-
-            if (jQueryDisabled) {
-              // BUG: https://github.com/emberjs/ember.js/issues/17840
-              assert.equal(hidden, 1, 'The link bubbled anyway');
-            } else {
-              assert.strictEqual(hidden, 0, "The link didn't bubble");
-            }
+            assert.equal(hidden, 0, "The link didn't bubble");
           });
       }
 

diff --git a/...ages/@ember/-internals/glimmer/tests/integration/components/link-to/routing-curly-test.js b/...ages/@ember/-internals/glimmer/tests/integration/components/link-to/routing-curly-test.js
@@ -6,7 +6,6 @@ import { alias } from '@ember/-internals/metal';
 import { subscribe, reset } from '@ember/instrumentation';
 import { Route, NoneLocation } from '@ember/-internals/routing';
 import { EMBER_IMPROVED_INSTRUMENTATION } from '@ember/canary-features';
-import { jQueryDisabled } from '@ember/-internals/views';
 
 // IE includes the host name
 function normalizeUrl(url) {
@@ -862,12 +861,7 @@ moduleFor(
         .then(() => {
           assert.equal(this.$('#contact').text(), 'Contact', 'precond - the link worked');
 
-          if (jQueryDisabled) {
-            // BUG: https://github.com/emberjs/ember.js/issues/17840
-            assert.equal(hidden, 1, 'The link bubbled anyway');
-          } else {
-            assert.strictEqual(hidden, 0, "The link didn't bubble");
-          }
+          assert.equal(hidden, 0, "The link didn't bubble");
         });
     }
 
@@ -918,13 +912,7 @@ moduleFor(
         })
         .then(() => {
           assert.equal(this.$('#contact').text(), 'Contact', 'precond - the link worked');
-
-          if (jQueryDisabled) {
-            // BUG: https://github.com/emberjs/ember.js/issues/17840
-            assert.equal(hidden, 1, 'The link bubbled anyway');
-          } else {
-            assert.strictEqual(hidden, 0, "The link didn't bubble");
-          }
+          assert.equal(hidden, 0, "The link didn't bubble");
         });
     }
 

diff --git a/packages/@ember/-internals/glimmer/tests/integration/event-dispatcher-test.js b/packages/@ember/-internals/glimmer/tests/integration/event-dispatcher-test.js
@@ -106,7 +106,7 @@ moduleFor(
       assert.strictEqual(receivedEvent.target, this.$('#is-done')[0]);
     }
 
-    ['@test events bubbling up can be prevented'](assert) {
+    ['@test events bubbling up can be prevented by returning false'](assert) {
       let hasReceivedEvent;
 
       this.registerComponent('x-foo', {
@@ -133,6 +133,33 @@ moduleFor(
       assert.notOk(hasReceivedEvent, 'change event has not been received');
     }
 
+    ['@test events bubbling up can be prevented by calling stopPropagation()'](assert) {
+      let hasReceivedEvent;
+
+      this.registerComponent('x-foo', {
+        ComponentClass: Component.extend({
+          change() {
+            hasReceivedEvent = true;
+          },
+        }),
+        template: `{{yield}}`,
+      });
+
+      this.registerComponent('x-bar', {
+        ComponentClass: Component.extend({
+          change(e) {
+            e.stopPropagation();
+          },
+        }),
+        template: `<input id="is-done" type="checkbox">`,
+      });
+
+      this.render(`{{#x-foo}}{{x-bar}}{{/x-foo}}`);
+
+      runTask(() => this.$('#is-done').trigger('change'));
+      assert.notOk(hasReceivedEvent, 'change event has not been received');
+    }
+
     ['@test event handlers are wrapped in a run loop'](assert) {
       this.registerComponent('x-foo', {
         ComponentClass: Component.extend({

diff --git a/packages/@ember/-internals/views/lib/system/event_dispatcher.js b/packages/@ember/-internals/views/lib/system/event_dispatcher.js
@@ -360,6 +360,8 @@ export default EmberObject.extend({
                 event.preventDefault();
                 event.stopPropagation();
                 break;
+              } else if (event.cancelBubble === true) {
+                break;
               }
             } else if (target.hasAttribute('data-ember-action')) {
               if (actionHandler(target, event) === false) {