fix(menu-button): menu should close when user taps outside the menu r…

…ect, WIP

src/lightbox/lightbox.js

@@ -161,7 +161,7 @@ import {
       lightboxElement.style.maxWidth = '100%';
       const img = lightboxElement.querySelector('img');
       if(img) {
-        lightboxElement.style.maxWidth = img.naturalWidth !== 'undefined' ? `${img.naturalWidth}px` : `${img.width}px` || '100%';
+        lightboxElement.style.maxWidth = img.naturalWidth !== undefined ? `${img.naturalWidth}px` : `${img.width}px` || '100%';
       }
 
       const fh = footerHeight(lightboxElement.querySelector('footer'), lightboxElement.classList.contains(STICKY_FOOTER));

src/menu-button/menu-button.js

@@ -223,7 +223,7 @@ const menuFactory = element => {
   const clickHandler = event => {
 
     if(event.target) {
-      event.preventDefault();
+      //event.preventDefault();
 
       const t = event.target;
       if(t.closest(`.${MENU_BUTTON_MENU}`) === element) {
@@ -281,13 +281,13 @@ const menuFactory = element => {
     }
 
     // Handle click/tap outside menu client rect
-    document.documentElement.addEventListener('mouseup', clickHandler);
-    document.documentElement.addEventListener('touchend', clickHandler);
+    document.documentElement.addEventListener('mousedown', clickHandler);
+    document.documentElement.addEventListener('touchstart', clickHandler);
   };
 
   const close = (forceFocus = false, item = null) => {
-    document.documentElement.removeEventListener('mouseup', clickHandler);
-    document.documentElement.removeEventListener('touchend', clickHandler);
+    document.documentElement.removeEventListener('mousedown', clickHandler);
+    document.documentElement.removeEventListener('toucstart', clickHandler);
 
     element.dispatchEvent(
       new CustomEvent('_closemenu', {
@@ -319,14 +319,12 @@ const menuFactory = element => {
 
   const removeListeners = () => {
     element.removeEventListener('keydown', keyDownHandler);
-    element.removeEventListener('mouseup', clickHandler);
-    element.removeEventListener('touchend', clickHandler);
+    element.removeEventListener('click', clickHandler);
   };
 
   const addListeners = () => {
     element.addEventListener('keydown', keyDownHandler);
-    element.addEventListener('mouseup', clickHandler);
-    element.addEventListener('touchend', clickHandler);
+    element.addEventListener('click', clickHandler);
   };
 
   const init = () => {

test/menu-button/menu-button.spec.js

@@ -300,7 +300,7 @@ describe('MaterialExtMenuButton', () => {
         );
 
         assert.equal(components[0].MaterialExtMenuButton.getMenuElement(),
-          components[0].MaterialExtMenuButton.getMenuElement(), 'Expected buttons to share a menu');
+          components[1].MaterialExtMenuButton.getMenuElement(), 'Expected buttons to share a menu');
 
         componentHandler.downgradeElements(components);
       }
@@ -521,6 +521,36 @@ describe('MaterialExtMenuButton', () => {
       assert.isTrue(menu.hasAttribute('hidden'), 'ESC key: Expected menu to have hidden attribute');
     });
 
+    it('should close an already open menu when another menu button is clicked', () => {
+      const container = document.querySelector('#mount');
+      try {
+        container.insertAdjacentHTML('beforeend', menu_buttons_with_shared_menu);
+        const [...buttons] = container.querySelectorAll(`.${MENU_BUTTON}`);
+
+        assert.equal(buttons.length, 2, 'Expected two buttons');
+
+        componentHandler.upgradeElement(buttons[0], 'MaterialExtMenuButton');
+        componentHandler.upgradeElement(buttons[1], 'MaterialExtMenuButton');
+
+        buttons[0].MaterialExtMenuButton.closeMenu();
+        buttons[1].MaterialExtMenuButton.closeMenu();
+        dispatchMouseEvent(buttons[0], 'click');
+        assert.equal(buttons[0].getAttribute('aria-expanded'), 'true', 'Expected button 1 to have an open menu');
+        assert.equal(buttons[1].getAttribute('aria-expanded'), 'false', 'Expected button 2 to be closed');
+
+        dispatchMouseEvent(buttons[1], 'mousedown');
+        dispatchMouseEvent(buttons[1], 'click');
+        assert.equal(buttons[0].getAttribute('aria-expanded'), 'false', 'Expected button 1 to not have an open menu after clicking button 2');
+        assert.equal(buttons[1].getAttribute('aria-expanded'), 'true', 'Expected button 2 to be open after clicking that button');
+
+        componentHandler.downgradeElements(buttons);
+      }
+      finally {
+        removeChildElements(container);
+      }
+    });
+
+
     it('does nothing when an "undefined" key i pressed', () => {
       expect( () => {
         dispatchKeyDownEvent(button, VK_PAGE_UP);
@@ -724,7 +754,7 @@ describe('MaterialExtMenuButton', () => {
       button.MaterialExtMenuButton.openMenu();
       const selectedItem = menu.children[1];
       selectedItem.focus();
-      dispatchMouseEvent(selectedItem, 'mouseup');
+      dispatchMouseEvent(selectedItem, 'click');
       assert.equal(menu.children[1].getAttribute('aria-selected'), 'true', 'Mouse cick: Expected menu item to have aria-selected="true"');
       assert.isTrue(menu.hasAttribute('hidden'), 'Mouse click: Expected menu to have hidden attribute');
     });
@@ -741,6 +771,14 @@ describe('MaterialExtMenuButton', () => {
       assert.isTrue(menu.hasAttribute('hidden'), 'After closing menu: Expected menu to have hidden attribute');
     });
 
+    it('closes the menu when when clicking outside the menu rect', () => {
+      button.MaterialExtMenuButton.openMenu();
+      const selectedItem = menu.children[1];
+      selectedItem.focus();
+      dispatchMouseEvent(document.documentElement, 'mousedown');
+      assert.isTrue(menu.hasAttribute('hidden'), 'Mouse down: Expected menu to have hidden attribute after clicking outside menu rect');
+    });
+
     it('emits a custom select event when a menu item is clicked', () => {
       button.MaterialExtMenuButton.setSelectedMenuItem(menu.children[0]);
 
@@ -760,7 +798,7 @@ describe('MaterialExtMenuButton', () => {
 
       try {
         // Trigger click
-        dispatchMouseEvent(selectedItem, 'mouseup');
+        dispatchMouseEvent(selectedItem, 'click');
 
         const selected = button.MaterialExtMenuButton.getSelectedMenuItem();
         assert.equal(selectedItem, selected, 'Expected "button.MaterialExtMenuButton.getSelectedMenuItem()" return the slected menu item element');