fix: close Menu/Popover on right click

fix #117
jcoreio · Mar 13, 2023 · 5f4e1af · 5f4e1af
1 parent ef25986
commit 5f4e1af
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 0 deletions.
diff --git a/src/hooks.js.flow b/src/hooks.js.flow
@@ -142,6 +142,7 @@ declare export function bindPopover(popupState: PopupState): {|
   open: boolean,
   onClose: () => void,
   onMouseLeave: (event: SyntheticMouseEvent<>) => void,
+  onContextMenu: (event: SyntheticMouseEvent<>) => void,
   disableAutoFocus?: boolean,
   disableEnforceFocus?: boolean,
   disableRestoreFocus?: boolean,
@@ -166,6 +167,7 @@ declare export function bindMenu(popupState: PopupState): {|
   open: boolean,
   onClose: () => void,
   onMouseLeave: (event: SyntheticMouseEvent<>) => void,
+  onContextMenu: (event: SyntheticMouseEvent<>) => void,
   autoFocus?: boolean,
   disableAutoFocusItem?: boolean,
   disableAutoFocus?: boolean,

diff --git a/src/hooks.ts b/src/hooks.ts
@@ -469,6 +469,7 @@ export function bindPopover({
   open: boolean
   onClose: () => void
   onMouseLeave: (event: MouseEvent) => void
+  onContextMenu: (event: MouseEvent) => void
   disableAutoFocus?: boolean
   disableEnforceFocus?: boolean
   disableRestoreFocus?: boolean
@@ -482,6 +483,10 @@ export function bindPopover({
     open: isOpen,
     onClose: close,
     onMouseLeave,
+    onContextMenu: (e: MouseEvent) => {
+      e.preventDefault()
+      close()
+    },
     ...(disableAutoFocus && {
       disableAutoFocus: true,
       disableEnforceFocus: true,
@@ -520,6 +525,7 @@ export function bindMenu({
   open: boolean
   onClose: () => void
   onMouseLeave: (event: MouseEvent) => void
+  onContextMenu: (event: MouseEvent) => void
   autoFocus?: boolean
   disableAutoFocusItem?: boolean
   disableAutoFocus?: boolean
@@ -535,6 +541,10 @@ export function bindMenu({
     open: isOpen,
     onClose: close,
     onMouseLeave,
+    onContextMenu: (e: MouseEvent) => {
+      e.preventDefault()
+      close()
+    },
     ...(disableAutoFocus && {
       autoFocus: false,
       disableAutoFocusItem: true,