Modal root element makes certain types of hover interaction impossible

Because Modal creates a screen-filling element, it seems like it’s impossible to implement something like opening a submenu whenever a MenuItem is hovered. Either it’s impossible to tell if the MenuItem is still being hovered (because it’s blocked by the modal root), or the submenu can’t get any pointer events, if I disable pointer events on its modal root, so that I can see if a MenuItem is being hovered.

My last issue about this seems to have been deleted because I complained about how difficult this has been. It’s been very frustrating for me trying to fix this functionality in material-ui-popup-state to help one of the people using my library 😢 Can someone please show some sympathy for my frustration? We are humans, not robots. Only robots should be expected to show no emotion at all.

I had edited the issue to soften the language I wrote while angry. But I never called anyone names or used threatening language. I think you should allow me to say that I feel angry, and contend that something was a bad idea when I illustrate problems it’s causing.

[jedwards1211]

Okay I discovered that even though pointer-events: none on the modal root element makes all of its descendants invisible to the mouse, I can set pointer-events: auto on the descendants to make them visible to the mouse again. So there is a solution to this problem, not that it’s elegant.

I still question the logic of rendering a Popover inside of an invisible screen-filling element that serves little purpose when the backdrop is hidden (which Popover does). But at least hover interaction isn’t impossible.

[mbrookes]

Related issues: #8152 #11723