[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

Tech	Version
Material-UI	v1.0.0-beta.44
React	16
browser	Chrome 65
etc

[dmitriy-komarov]

Understanding, this works by design for mobile platforms, but for desktops (browsers) there is still not friendly behaviour.

The case: App renders tree of folders. User calls a context menu for one folder, then for another folder, etc… Currently user always needs to mandatory close previous popover by left clicking outside of it to open another.

I checked menus in Windows. When I call context menus for different folders, I do not need to close menu before opening a new one.

There are two issues I see here:

1. There is not event bubbling on desktops. I suppose there should be a flag (property) for this. Even for desktops. I ask to return to this question discussion.
2. Popover can be closed by left click outside only. Right click opens default browser menu - this turns the case twice harder for user. Now he have to close two menus before opening a new one!

Maybe the item (1) is for discuss, but I guess item (2) should be fixed. At least by disabling browser context menu on right click. This behaviour can be changed adding onContextMenu property only, not by CSS. But the best if right click will close the menu as well left click does.

[simoami]

I see what you mean 👍 Like I said we can keep the default behavior intact and offer more customization. I think different use cases call for different behavior. I personally think one less click is better ux if it doesn’t have a side effect.