[Menu] Clicking outside a menu blocks click from bubbling up

Current Behavior

There a fundamental issue with the menu dismissal. When presented with multiple buttons or select fields that show a menu, it take 2 clicks to dismiss the existing menu and show the next one.

Steps to Reproduce

In the demo below, try opening the first menu by clicking on the first button, then the second menu by clicking on the second button. Notice that an extra click is needed to dismiss the first menu then another one to show the second menu.

https://codesandbox.io/s/9lp94v86zo

Expected Behavior

Good UX guidelines recommend to reduce the number of clicks needed to perform an action. As opposed to modals and dialogs, menus are not expected to hijack the click away events.

The issue is that the background click to dismiss a menu, has a e.preventDefault() which prevents it from bubbling up to the other element.

In other frameworks, you can click on an other element, and it will have double effect: close up the first menu, and show the new one in one click action. For reference:

Bootstrap

http://getbootstrap.com/2.3.2/components.html#buttonDropdowns

Semantic-UI

Sencha ExtJS

http://examples.sencha.com/extjs/6.5.3/examples/kitchensink/?modern#buttons-split

UIKit

https://getuikit.com/v2/docs/button.html

Your Environment

Start with the linked CodeSandbox reproduction and trace the menu dismissal behavior, especially the background click handling and the reported preventDefault call. Done means clicking another button closes the existing menu and opens the next menu in a single click, with regression coverage for that interaction.