Material-ui: [Menu] Dropdown + onMouseOver => Dropdown open forever

[romainquellec]

• [x] This is not a v0.x issue.
• [x] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

When I use a Menu like a Dropdown with onMouseOver, when I dont go on the dropdown, the dropdown doesnt close by itself (see example)

Current Behavior 😯

Well, I said everything already. Maybe, I've done something wrong, but I dont see how to do it with my current knowledge of mui.

Steps to Reproduce 🕹

https://codesandbox.io/s/material-demo-nbki0

If you mouseover the button and go left without touching the dropdown, the dropdown will be open forever. How to fix that simply ?

| Tech | Version |
|--------------|---------|
| Material-UI | v4.2.1 |
| React | 16.8.6 |

[oliviertassinari]

@romainquellec Thanks for opening this issue. I think that it's a use case we should support natively. Triggering an action on a hover event is often not a great idea. The purpose of a hover state is to indicate something is clickable or to provide quick information, e.g. tooltip. The click should be reserved for doing actions. But they might be cases where it's valid.

I think that this issue highlights our lack of a good dropdown story for the library.

[romainquellec]

You're welcome !

Do you suggest I wait for a component ? Have you a quick fix in mind ?

[eps1lon]

I'm missing the connection between the demo and the initial statement. For dropdowns we have the Select component.

The issue with the demo is that you mouseout of the window and you get in this weird limbo where you never actually moused out. We can probably fix the onClose logic but it's not related to dropdown menus.

Could you record a video with the interaction you wouldn't expect? Best in a more isolated environment i.e. not directly at the edge of the screen.

[romainquellec]

Well, no.
You can try with this if you want, but I think the issue is pretty clear. ( https://codesandbox.io/embed/material-demo-huq5z )

1. MouseIn on the Button
2. Leave the Button NOT by the Menu
3. Menu still open

I choose this way of doing following some issues about dropdown (https://github.com/mui-org/material-ui/issues/10804)
Now, I know a dropdown component will eventually come, and maybe, there is no good way of doing this, and I'm OK with this. (I will just wait for the component)

If you know a better way of doing a dropdown, or if I did something wrong, just just tell me, but, again, this issue seems pretty clear to me.

[romainquellec]

Alternative I found : https://jcoreio.github.io/material-ui-popup-state/ here (https://github.com/mui-org/material-ui/issues/9893)

[eps1lon]

Now, I know a dropdown component will eventually come, and maybe, there is no good way of doing this, and I'm OK with this. (I will just wait for the component)

A dropdown is already implemented in https://material-ui.com/components/selects/#simple-select or with less boilerplate https://material-ui.com/components/text-fields/

In your demo I only see a menu that should open on hover. That's a bit more tricky to achieve since we have to deal with the backdrop and what should happen when I click on the button when the menu is open. You're probably better of implementing this with a Popper. The Popover is a more disruptive UI that's not very well suited for mouseover interactions.

So I would either recommend subscribing to #9893 or ask on SO/spectrum how to implement a menu that opens on hover.

[romainquellec]

"A dropdown is already implemented". To be clear, to me :

A dropdown is not a select. (Maybe, you call that a Menu)
Dropdown is an "overlay" for displaying a list of links

A Select is an "overlay" that allow a user to select a value from a series of options (in a form)