fix(overflow-menu): make trigger button toggle overflow menu (#426)

Fixes #423.
carbon-design-system · Jan 10, 2018 · 16ad4ea · 16ad4ea
1 parent 221e5e2
commit 16ad4ea
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 1 deletion.
diff --git a/src/components/overflow-menu/overflow-menu.js b/src/components/overflow-menu/overflow-menu.js
@@ -27,13 +27,19 @@ class OverflowMenu extends mixin(createComponent, initComponentBySearch, evented
     this.manage(
       on(this.element.ownerDocument, 'click', event => {
         this._handleDocumentClick(event);
+        this.wasOpenBeforeClick = undefined;
       })
     );
     this.manage(
       on(this.element.ownerDocument, 'keypress', event => {
         this._handleKeyPress(event);
       })
     );
+    this.manage(
+      on(this.element, 'mousedown', () => {
+        this.wasOpenBeforeClick = element.classList.contains(this.options.classShown);
+      })
+    );
   }
 
   /**
@@ -75,7 +81,7 @@ class OverflowMenu extends mixin(createComponent, initComponentBySearch, evented
   _handleDocumentClick(event) {
     const element = this.element;
     const isOfSelf = element.contains(event.target);
-    const shouldBeOpen = isOfSelf && !element.classList.contains(this.options.classShown);
+    const shouldBeOpen = isOfSelf && !this.wasOpenBeforeClick;
     const state = shouldBeOpen ? 'shown' : 'hidden';
 
     if (isOfSelf) {

diff --git a/tests/spec/overflow-menu_spec.js b/tests/spec/overflow-menu_spec.js
@@ -35,6 +35,7 @@ describe('Test Overflow menu', function() {
       expect(element.classList.contains('bx--overflow-menu--open')).to.be.true;
 
       // Secondary click to close overflow-menu:
+      element.dispatchEvent(new CustomEvent('mousedown', { bubbles: true }));
       element.dispatchEvent(new CustomEvent('click', { bubbles: true }));
       expect(element.classList.contains('bx--overflow-menu--open')).to.be.false;
     });
@@ -97,6 +98,7 @@ describe('Test Overflow menu', function() {
       const spyOverflowEvent = sinon.spy();
       events.on(document, 'floating-menu-hidden', spyOverflowEvent);
       element.classList.add('bx--overflow-menu--open');
+      element.dispatchEvent(new CustomEvent('mousedown', { bubbles: true }));
       element.dispatchEvent(new CustomEvent('click', { bubbles: true }));
       expect(spyOverflowEvent).to.have.been.called;
     });