Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

bindHover almost working

See original GitHub issue

I am facing a problem with the bindHover hook, it all works on enter but when I leave the MenuItem I hovered on, the Menu does not automatically close:

I am using the following versions of Material-UI:

“@material-ui/core”: “^4.9.14”,
“@material-ui/icons”: “^4.9.1”,
“@material-ui/styles”: “^4.9.14”

Issue Analytics

State:
Created 3 years ago
Reactions:1
Comments:11 (5 by maintainers)

Top GitHub Comments

1reaction

jedwards1211commented, Jun 26, 2020

Would it be possible to make a codesandbox to reproduce your issue? Here’s the Material-UI codesandbox template: https://codesandbox.io/s/material-ui-issue-dh2yh?file=/src/Demo.js

In OP’s case it seemed to be caused by the menu items being unintentionally remounted on each render (according to a code sample in a different issue), so that’s one thing to check for.

0reactions

jedwards1211commented, Jun 26, 2020

Oh man, I completely forgot about the workarounds I had created for hover cases… 😂

In this case you need to

import Menu from 'material-ui-popup-state/HoverMenu'

import Popover from 'material-ui-popup-state/HoverPopover'

This is because Material-UI Modal has a bad design where it blocks all pointer events from getting through to any other components on the screen (therefore the hovered element never receives a mouse leave event), requiring a messy workaround.

I’ll fix the examples in the README and make this clearer…sorry for the confusion!