Material-UI - Is there a way to allow right click to close Modal?

0
votes

I would like to be able to close a Menu (or to be more specific, a Popover) with a right click, any mousedown event to be clear.

I've found this on the documentation: https://material-ui.com/components/menus/#MenuListComposition.js

Which I have then cleaned a bit. Here is what I've got: https://codesandbox.io/s/material-ui-react-8nqqb?fontsize=14&hidenavigation=1&theme=dark

If you check it you can see that the Popper closes on right click, but now I can scroll the page while the menu is open :/

This is almost what I need but I was not able to do the same with a Popover since it uses Modal internally and it seems either they don't use the ClickAwayListener or they don't expose a way to modify its props.

So if anyone knows how to make mousedown events close a Popover or prevent scrolling when a Popper is open I'll be more than happy to hear any solution.

Thanks in advance.

Edit:

Thanks to this answer I got a direction, I tweaked the given sandbox and I managed to do what I wanted. I finally had to use the Popper and prevent scroll when it's open.

Here's the final sandbox link: https://codesandbox.io/embed/material-ui-react-1qroy?fontsize=14&hidenavigation=1&theme=dark

1
reactjsmaterial-ui

1 Answers

0
votes

Here's a way to disable scrolling if the popper is open.

    window.onscroll = open ? null : () => window.scrollTo(0, 0);

https://codesandbox.io/s/material-ui-react-zysue

Here's the same example with popover instead of popper

https://codesandbox.io/s/material-ui-react-n0bf9