fix(Dropdown): Close dropdowns during event capture phase

ember-bootstrap · Sep 13, 2017 · b220432 · b220432
1 parent 0713ac6
commit b220432
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 2 deletions.
diff --git a/addon/components/base/bs-dropdown.js b/addon/components/base/bs-dropdown.js
@@ -224,13 +224,13 @@ export default Component.extend({
   addClickListener() {
     if (!this.clickListener) {
       this.clickListener = bind(this, this.closeOnClickHandler);
-      document.addEventListener('click', this.clickListener);
+      document.addEventListener('click', this.clickListener, true);
     }
   },
 
   removeClickListener() {
     if (this.clickListener)  {
-      document.removeEventListener('click', this.clickListener);
+      document.removeEventListener('click', this.clickListener, true);
       this.clickListener = null;
     }
   },

diff --git a/tests/integration/components/bs-dropdown-test.js b/tests/integration/components/bs-dropdown-test.js
@@ -79,6 +79,24 @@ test('clicking dropdown menu will close it', async function(assert) {
   assert.equal(find(':first-child').classList.contains(openClass()), false, 'Dropdown is closed');
 });
 
+test('dropdown will close on click, when default is prevented, propagation is stopped', async function(assert) {
+  assert.expect(3);
+
+  this.set('stopEvent', (event) => {
+    event.stopPropagation();
+    event.preventDefault();
+    assert.ok('stopped event');
+  });
+
+  this.render(hbs`{{#bs-dropdown as |dd|}}{{#dd.toggle}}Dropdown <span class="caret"></span>{{/dd.toggle}}{{#dd.menu}}<li><a href="#">Something</a></li>{{/dd.menu}}{{/bs-dropdown}}<div id="target" onClick={{action stopEvent}} />`);
+
+  await click('a.dropdown-toggle');
+  assert.equal(find(':first-child').classList.contains(openClass()), true, 'Dropdown is open');
+
+  await click('#target');
+  assert.equal(find(':first-child').classList.contains(openClass()), false, 'Dropdown is closed');
+});
+
 test('clicking dropdown menu when closeOnMenuClick is false will not close it', async function(assert) {
   this.render(hbs`{{#bs-dropdown closeOnMenuClick=false as |dd|}}{{#dd.toggle}}Dropdown <span class="caret"></span>{{/dd.toggle}}{{#dd.menu}}<li><a href="#">Something</a></li>{{/dd.menu}}{{/bs-dropdown}}`);
   await click('a.dropdown-toggle');