Как закрыть контекстное меню пользовательского интерфейса материала, не отображая контекстное меню по умолчанию?

Question

Я пытаюсь использовать меню пользовательского интерфейса материала для отображения контекстного меню на элементе div, как в https://material-ui.com/components/menus/#context -меню

. Это работает, я могу щелкнуть правой кнопкой мыши и отобразить .

Однако контекстное меню material-ui при отображении внедряет прозрачный элемент div, охватывающий весь экран за меню . Это означает, что этот элемент перехватывает любые дальнейшие клики. Кажется, этот элемент закроет меню при обнаружении левого щелчка, но переместится и продолжит отображать то же контекстное меню , если щелкнуть правой кнопкой мыши в любом другом месте страницы, в том числе там, где контекстное меню не имеет значения.

Есть ли способ отобразить меню без этого прозрачного элемента div, который удаляет управление с моей страницы?

Это действие можно увидеть в примере: https://material-ui.com/components/menus/#context -menu Щелкните правой кнопкой мыши по тексту, затем щелкните правой кнопкой мыши в любом другом месте (пока меню все еще отображается), и вы можете вызвать отображение меню по всей странице, даже в панели приложения, где пункты меню не имеют смысла.

Answer 1

Я пытался сделать это так:

export default function MenuPopupState() {
  return (
    <PopupState variant="popover" popupId="demo-popup-menu">
      {popupState => {
        const menuProps = bindMenu(popupState);
        return (
          <React.Fragment>
            <Button
              variant="contained"
              color="primary"
              {...bindTrigger(popupState)}
            >
              Open Menu
            </Button>
            <Menu
              {...menuProps}
              onContextMenu={event => {
                event.preventDefault();
              }}
              onMouseDown={e => {
                menuProps.onClose();
              }}
            >
              <MenuItem onClick={popupState.close}>Cake</MenuItem>
              <MenuItem onClick={popupState.close}>Death</MenuItem>
            </Menu>
          </React.Fragment>
        );
      }}
    </PopupState>
  );
}

https://codesandbox.io/s/material-demo-szpbr?file= / demo. js