Add config option to fix scrollbar clicking

As mentioned in cibernox#409, clicking a scrollbar will close an open basic-dropdown. This is due to mousedown being used instead of click. To not break existing behaviour, I've added a config option which can be passed to the parent container (basic-dropdown) or the content component.
k-fish · Aug 29, 2018 · 254b4c1 · 254b4c1
1 parent ecb6c75
commit 254b4c1
Show file tree

Hide file tree

Showing 3 changed files with 57 additions and 2 deletions.
diff --git a/addon/components/basic-dropdown/content.js b/addon/components/basic-dropdown/content.js
@@ -146,7 +146,12 @@ export default Component.extend({
     let dropdown = this.get('dropdown');
     this.triggerElement = this.triggerElement || document.querySelector(`[data-ebd-id=${dropdown.uniqueId}-trigger]`);
     this.dropdownElement = document.getElementById(this.dropdownId);
-    document.addEventListener('mousedown', this.handleRootMouseDown, true);
+    if (this.get('useClickEvent')) {
+      document.addEventListener('click', this.handleRootMouseDown, true);
+    } else {
+      document.addEventListener('mousedown', this.handleRootMouseDown, true);
+    }
+
     if (this.get('isTouchDevice')) {
       document.addEventListener('touchstart', this.touchStartHandler, true);
       document.addEventListener('touchend', this.handleRootMouseDown, true);
@@ -360,7 +365,12 @@ export default Component.extend({
     this.removeScrollHandling();
     this.scrollableAncestors = [];
     this.stopObservingDomMutations();
-    document.removeEventListener('mousedown', this.handleRootMouseDown, true);
+
+    if (this.get('useClickEvent')) {
+      document.removeEventListener('click', this.handleRootMouseDown, true);
+    } else {
+      document.removeEventListener('mousedown', this.handleRootMouseDown, true);
+    }
     if (this.get('isTouchDevice')) {
       document.removeEventListener('touchstart', this.touchStartHandler, true);
       document.removeEventListener('touchend', this.handleRootMouseDown, true);

diff --git a/addon/templates/components/basic-dropdown.hbs b/addon/templates/components/basic-dropdown.hbs
@@ -15,6 +15,7 @@
     hPosition=(readonly hPosition)
     renderInPlace=(readonly renderInPlace)
     preventScroll=(readonly preventScroll)
+    useClickEvent=(readonly useClickEvent)
     vPosition=(readonly vPosition)
     destination=(readonly destination)
     top=(readonly top)

diff --git a/tests/integration/components/basic-dropdown/content-test.js b/tests/integration/components/basic-dropdown/content-test.js
@@ -109,6 +109,50 @@ module('Integration | Component | basic-dropdown/content', function(hooks) {
     await click('#other-div');
   });
 
+  // Mousedown while the component is opened (scrollbar fix)
+  test('Using mouse down with useClickEvent being true will not close a component if it is opened', async function(assert) {
+    assert.expect(0);
+    this.dropdown = {
+      uniqueId: 'e123',
+      isOpen: true,
+      actions: {
+        close() {
+          assert.ok(true, 'The close action should not be called');
+        },
+        reposition() {}
+      }
+    };
+    await render(hbs`
+      <div id="destination-el"></div>
+      <div id="other-div"></div>
+      {{#basic-dropdown/content useClickEvent=true dropdown=dropdown destination='destination-el'}}Lorem ipsum{{/basic-dropdown/content}}
+    `);
+
+    await triggerEvent('#other-div', 'mousedown');
+  });
+
+  // Mousedown while the component is opened (scrollbar fix)
+  test('Using mouse down with useClickEvent being false will close a component if it is opened', async function(assert) {
+    assert.expect(1);
+    this.dropdown = {
+      uniqueId: 'e123',
+      isOpen: true,
+      actions: {
+        close() {
+          assert.ok(true, 'The close action gets called');
+        },
+        reposition() {}
+      }
+    };
+    await render(hbs`
+      <div id="destination-el"></div>
+      <div id="other-div"></div>
+      {{#basic-dropdown/content useClickEvent=false dropdown=dropdown destination='destination-el'}}Lorem ipsum{{/basic-dropdown/content}}
+    `);
+
+    await triggerEvent('#other-div', 'mousedown');
+  });
+
   test('Clicking anywhere inside the dropdown content doesn\'t invoke the close action', async function(assert) {
     assert.expect(0);
     this.dropdown = {