ContextMenu: don't pop up the browser menu on right click while open

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;

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;

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>
   );