Rmwc: Persistent menu component without flashing

[Anwardo]

Right now it doesn't appear to be possible to use a <Menu /> component as persistent while interacting inside the menu and only closing when clicking outside the menu without the menu flashing on every click inside. It's not always possible to use e.stopPropagation() on elements inside the menu. This behavior appears on the docs page as well.

[jamesmfriedman]

This is a known problem with material-components-web. In 38 / 39 they've released the menu-surface component which will be part of the next release of RMWC.

[jamesmfriedman]

Fixed with 1.9 release. Use new MenuSurface component.

[fhollste]

I'm having trouble with a Select inside a MenuSurface. Since the Select is actually outside the MenuSurface DOM element the onClose event gets triggered. The open/close animation still runs even though the "open" props is not touched.

Perhaps it's an antipattern to have a Select in a menu but why does the animation run even though the open prop is untouched?

[jamesmfriedman]

Hi @fhollste! I have a problem with this as well. This is an area where I've been pushing to have it fixed upstream. Basically, it comes down to trying to marry Reacts unidirectional data flow to components that don't necessarily respect that kind of pattern. In this case specifically, the animation is triggered before RMWC ever has a chance to do anything about it. Forcing the menu back open seemed like at least a step in the right direction until material gets it fixed on their end. Otherwise, correcting this would result in overriding a bunch of the internal menu code.

https://github.com/material-components/material-components-web/issues/4357

[jamesmfriedman]

Long time coming but I found a way to monkey patch the internal problem and fix it.

[jamesmfriedman]

Fixed in 6.0.0.