From 5ce5b950e49cb8d6ff21ff2813e3ecd61591a2da Mon Sep 17 00:00:00 2001
From: Jesse Chan <jc@linux.com>
Date: Sat, 14 Nov 2020 23:05:17 +0800
Subject: [PATCH] ContextMenu: don't pop up the browser menu on right click
 while open

---
 .../javascript/components/general/ContextMenuMountPoint.tsx   | 4 ++++
 client/src/javascript/ui/components/ContextMenu.tsx           | 4 ++++
 client/src/javascript/ui/components/Overlay.tsx               | 4 +++-
 3 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/client/src/javascript/components/general/ContextMenuMountPoint.tsx b/client/src/javascript/components/general/ContextMenuMountPoint.tsx
index cee679dc..faa8a513 100644
--- a/client/src/javascript/components/general/ContextMenuMountPoint.tsx
+++ b/client/src/javascript/components/general/ContextMenuMountPoint.tsx
@@ -32,6 +32,10 @@ const ContextMenuMountPoint: FC<ContextMenuMountPointProps> = observer(({id}: Co
       onOverlayClick={() => {
         UIActions.dismissContextMenu(id);
       }}
+      onOverlayRightClick={(e) => {
+        e.preventDefault();
+        UIActions.dismissContextMenu(id);
+      }}
       isIn={isOpen}>
       {items.map((item, index) => {
         let menuItemContent;
diff --git a/client/src/javascript/ui/components/ContextMenu.tsx b/client/src/javascript/ui/components/ContextMenu.tsx
index ea9a7c19..eadac093 100644
--- a/client/src/javascript/ui/components/ContextMenu.tsx
+++ b/client/src/javascript/ui/components/ContextMenu.tsx
@@ -25,6 +25,7 @@ interface ContextMenuProps {
   overlayProps?: OverlayProps;
   onClick?: (event: MouseEvent<HTMLDivElement>) => void;
   onOverlayClick?: (event: MouseEvent<HTMLDivElement>) => void;
+  onOverlayRightClick?: (event: MouseEvent<HTMLDivElement>) => void;
 }
 
 const ContextMenu = forwardRef<HTMLDivElement, ContextMenuProps>(
@@ -40,6 +41,7 @@ const ContextMenu = forwardRef<HTMLDivElement, ContextMenuProps>(
       triggerCoordinates,
       onClick,
       onOverlayClick,
+      onOverlayRightClick,
       overlayProps,
     }: ContextMenuProps,
     ref,
@@ -123,6 +125,7 @@ const ContextMenu = forwardRef<HTMLDivElement, ContextMenuProps>(
           <Overlay
             additionalClassNames="context-menu__overlay"
             onClick={onOverlayClick}
+            onContextMenu={onOverlayRightClick}
             isTransparent
             {...overlayProps}
           />
@@ -148,6 +151,7 @@ ContextMenu.defaultProps = {
   },
   onClick: undefined,
   onOverlayClick: undefined,
+  onOverlayRightClick: undefined,
 };
 
 export default ContextMenu;
diff --git a/client/src/javascript/ui/components/Overlay.tsx b/client/src/javascript/ui/components/Overlay.tsx
index bb767ccc..b9f128b1 100644
--- a/client/src/javascript/ui/components/Overlay.tsx
+++ b/client/src/javascript/ui/components/Overlay.tsx
@@ -7,12 +7,14 @@ export interface OverlayProps {
   isInteractive?: boolean;
   isTransparent?: boolean;
   onClick?: (event: MouseEvent<HTMLDivElement>) => void;
+  onContextMenu?: (event: MouseEvent<HTMLDivElement>) => void;
 }
 
 const Overlay: FC<OverlayProps> = ({
   children,
   additionalClassNames,
   onClick,
+  onContextMenu,
   isInteractive,
   isTransparent,
 }: OverlayProps) => {
@@ -22,7 +24,7 @@ const Overlay: FC<OverlayProps> = ({
   });
 
   return (
-    <div className={classes} onClickCapture={onClick}>
+    <div className={classes} onClickCapture={onClick} onContextMenuCapture={onContextMenu}>
       {children}
     </div>
   );