[docs] Unstyled menu can't be closed with the designated Button

[Klukies]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Current behavior 😯

The event onClose is called even when clicking the button that's designated to open/close the menu, this caused the close & open event to be called after eachother, making it impossible to close the menu when clicking the button.

Expected behavior 🤔

Clicking away from the menu should fire the close event, while clicking on the button should fire the click event from the button.

Steps to reproduce 🕹

Visit the official docs, clicking the basic usage button. You will see it's impossible to close the menu when clicking the button again after it is opened.

Context 🔦

I'm trying to implement the unstyled menu button from MUI. Not being able to close this when clicking the button seems like a bug as the basic menu from Material UI does support this behaviour.

Your environment 🌎

No response

[mnajdova]

Agree, the demo should be updated. cc @michaldudak can you check this out?

[dielok]

Hi, thanks for the workaround. Shouldn't that be the default behaviour? As I understand, that is just a hack the developer can apply while using it. I mean, opening a dropdown by clicking on the button and closing it by clicking again on the button is the expected behaviour of such a controll element.

[michaldudak]

When we have the MenuButton component, this logic will be built in. For now, we have to fall back to this fix.

[b3e]

One simpler fix is to use onMouseDown instead of onClick on the toggle button.