Material-UI context menu that doesn't block new context menu events? - material-ui

Question

The Material-UI docs give an example of how to build a context menu. But when this menu is open, it seems like all the elements of the page stop receiving onContextMenu events. So if you right-click outside the menu while it's open, the application won't be able to identify what was clicked on and won't be able to reposition the menu. The only option is to close the menu first (for instance by left-clicking outside the menu), then right click on the desired element.
How can I create a menu such that, when it's open, I can still identify what elements of the page have been right-clicked on and reposition the menu to the location of the new click?
(see this Codesandox that is a slight modification from the example in the docs, where a second div has been added that you can right-click on)

Answer 1

Found the solution! The trick is to close the context menu on the mouse down event of the parent div, and also setting an exit transitionDuration of 0 on the menu. For example, see this demo.tsx (also on Codesandox):
import React from "react";
import Menu from "#material-ui/core/Menu";
import MenuItem from "#material-ui/core/MenuItem";
import Typography from "#material-ui/core/Typography";
const initialState = {
mouseX: null,
mouseY: null
};
export default function ContextMenu() {
const [state, setState] = React.useState<{
mouseX: null | number;
mouseY: null | number;
}>(initialState);
const handleClick = (
divName: string,
event: React.MouseEvent<HTMLDivElement>
) => {
console.log(divName);
event.preventDefault();
setState({
mouseX: event.clientX - 2,
mouseY: event.clientY - 4
});
};
const handleClose = () => {
setState(initialState);
};
return (
<div
onContextMenu={e => e.preventDefault()}
onMouseDownCapture={e => {
if (e.button === 2) handleClose();
}}
>
<Menu
keepMounted
open={state.mouseY !== null}
onClose={handleClose}
anchorReference="anchorPosition"
anchorPosition={
state.mouseY !== null && state.mouseX !== null
? { top: state.mouseY, left: state.mouseX }
: undefined
}
transitionDuration={0}
>
<MenuItem onClick={handleClose}>Copy</MenuItem>
<MenuItem onClick={handleClose}>Print</MenuItem>
<MenuItem onClick={handleClose}>Highlight</MenuItem>
<MenuItem onClick={handleClose}>Email</MenuItem>
</Menu>
<div
onContextMenu={e => handleClick("div1", e)}
style={{ cursor: "context-menu" }}
>
<Typography>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ipsum
purus, bibendum sit amet vulputate eget, porta semper ligula. Donec
bibendum vulputate erat, ac fringilla mi finibus nec. Donec ac dolor
sed dolor porttitor blandit vel vel purus. Fusce vel malesuada ligula.
Nam quis vehicula ante, eu finibus est. Proin ullamcorper fermentum
orci, quis finibus massa. Nunc lobortis, massa ut rutrum ultrices,
metus metus finibus ex, sit amet facilisis neque enim sed neque.
Quisque accumsan metus vel maximus consequat. Suspendisse lacinia
tellus a libero volutpat maximus.
</Typography>
</div>
-----
<div
onContextMenu={e => handleClick("div2", e)}
style={{ cursor: "context-menu" }}
>
<Typography>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ipsum
purus, bibendum sit amet vulputate eget, porta semper ligula. Donec
bibendum vulputate erat, ac fringilla mi finibus nec. Donec ac dolor
sed dolor porttitor blandit vel vel purus. Fusce vel malesuada ligula.
Nam quis vehicula ante, eu finibus est. Proin ullamcorper fermentum
orci, quis finibus massa. Nunc lobortis, massa ut rutrum ultrices,
metus metus finibus ex, sit amet facilisis neque enim sed neque.
Quisque accumsan metus vel maximus consequat. Suspendisse lacinia
tellus a libero volutpat maximus.
</Typography>
</div>
</div>
);
}