MaterialUIのMenuを右クリックで表示させる

はじめに

先日、MaterialUIを使っている個人開発で右クリックでMenuを表示させる実装をした。

初めて右クリックの制御をしたのもあり、記事としてまとめておく。

右クリックのコールバック

まずコンポーネントが右クリックされた際のイベントを制御するためのコールバックだが、onContextMenuを`を使用することで可能となる。

onContextMenuという名称はMaterialUI独自のものではなく、一般的に利用されているようだ。以下は生のJavaScriptで使用する例。

noContext.addEventListener('contextmenu', e => {})

Element: contextmenu イベント - Web API | MDN

contextmenu イベントは、ユーザーがコンテキストメニューを開こうとしたときに発行されます。このイベントは、通常、マウスの右ボタンをクリックするか、コンテキストメニューキーを押すことで発行されます。

developer.mozilla.org

onContextMenu使用時の注意点

onContextMenuをそのまま使っただけでは、右クリック時に以下のようなブラウザのデフォルトの挙動が実行されてしまう。

これが出ないようにするためにpreventDefault()を使用する。

const onRightClick = (event: React.MouseEvent<HTMLElement>) => {
  event.preventDefault();
  // 実行したい処理
};

右クリックでMenuを表示させる

右クリックの制御は説明できたので、残りはMenuの表示の一般的な使い方を組み合わせれば実現できる。

const [menuAnchorElement, setMenuAnchorElement] = useState<HTMLElement | null>(null);
const onRightClick = (event: React.MouseEvent<HTMLElement>) => {
  event.preventDefault();
  setMenuAnchorElement(event.targetElement);
};
const onCloseMenu = () => {
  setMenuAnchorElement(null)
}

return (
  <div>
    <Button onContextMenu={onRightClick}>
      Right Click Target
    </Button>
    <Menu
      open={Boolean(anchorElement)}
      onClose={onCloseMenu}
      anchorEl={anchorElement}
    >
      <MenuItem onClick={onCloseMenu}>Item</MenuItem>
    </Menu>
  </div>
)

おわり

以上が右クリックでのMenu表示だが、実際に実装して自分で使ってみると右クリックできるかどうかはUI上では一見して分からずユーザーには気づいてもらいにくい機能なんじゃないかと感じた。

右クリック機能を実装する際はユーザーに使ってもらうためにもう一工夫するか、別の手段を利用できないかを考えた方が良さそう。