From c81b5d81e5894c2f8f185a456717d72175275749 Mon Sep 17 00:00:00 2001
From: Samuel Estrella <samuelestrella226@gmail.com>
Date: Tue, 7 Sep 2021 13:59:08 -0600
Subject: [PATCH] Right Click Menu: Fix the click problems (#8895)

---
 .../design-system/src/components/contextMenu/mask.js   | 10 ++++++----
 .../design-system/src/components/contextMenu/menu.js   |  8 ++++++--
 .../src/components/contextMenu/test/contextMenu.js     |  4 ++--
 .../src/components/canvas/rightClickMenu.js            |  1 +
 .../src/components/canvas/selectionCanvas.js           |  2 +-
 5 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/packages/design-system/src/components/contextMenu/mask.js b/packages/design-system/src/components/contextMenu/mask.js
index da13f9acd7a7..d3032fb78ebc 100644
--- a/packages/design-system/src/components/contextMenu/mask.js
+++ b/packages/design-system/src/components/contextMenu/mask.js
@@ -22,7 +22,6 @@ import { useEffect, useRef } from '@web-stories-wp/react';
 /**
  * Internal dependencies
  */
-import { noop } from '../../utils';
 import { POPOVER_Z_INDEX } from './styled';
 
 const ScreenMask = styled.div`
@@ -56,14 +55,17 @@ export default function Mask({ onDismiss }) {
   return (
     <>
       {/*
-        Disable Reason: Allow pointer events to pass through if there's no 'onDismiss' to preserve transition
+        Disable Reason: Prevent events from propagating so click + drag isn't triggered in the editor.
         */}
-      {/* eslint-disable-next-line styled-components-a11y/click-events-have-key-events, styled-components-a11y/no-static-element-interactions */}
+      {/* eslint-disable-next-line styled-components-a11y/no-static-element-interactions */}
       <ScreenMask
         ref={maskRef}
         data-testid="context-menu-mask"
         hasOnDismiss={Boolean(onDismiss)}
-        onClick={onDismiss || noop}
+        onMouseDown={(evt) => {
+          evt.stopPropagation();
+          onDismiss?.();
+        }}
       />
     </>
   );
diff --git a/packages/design-system/src/components/contextMenu/menu.js b/packages/design-system/src/components/contextMenu/menu.js
index a260a24c2e80..8d1456eeaacf 100644
--- a/packages/design-system/src/components/contextMenu/menu.js
+++ b/packages/design-system/src/components/contextMenu/menu.js
@@ -290,14 +290,18 @@ const Menu = ({
   ]);
 
   return (
-    <MenuWrapper ref={wrapperRef} isIconMenu={isIconMenu} role="menu">
+    <MenuWrapper
+      ref={wrapperRef}
+      isIconMenu={isIconMenu}
+      role="menu"
+      {...props}
+    >
       <MenuList
         data-testid="context-menu-list"
         ref={listRef}
         isIconMenu={isIconMenu}
         aria-label={groupLabel}
         role="group"
-        {...props}
       >
         {items.map(({ separator, onFocus, ...itemProps }, index) => (
           <li
diff --git a/packages/design-system/src/components/contextMenu/test/contextMenu.js b/packages/design-system/src/components/contextMenu/test/contextMenu.js
index 53ae76945a93..ba9619f6306b 100644
--- a/packages/design-system/src/components/contextMenu/test/contextMenu.js
+++ b/packages/design-system/src/components/contextMenu/test/contextMenu.js
@@ -56,7 +56,7 @@ describe('ContextMenu', () => {
 
     const mask = screen.getByTestId('context-menu-mask');
     act(() => {
-      fireEvent.click(mask);
+      fireEvent.mouseDown(mask);
     });
 
     expect(onDismiss).toHaveBeenCalledTimes(1);
@@ -70,7 +70,7 @@ describe('ContextMenu', () => {
 
     const mask = screen.getByTestId('context-menu-mask');
     act(() => {
-      fireEvent.click(mask, { button: 'right' });
+      fireEvent.mouseDown(mask, { button: 'right' });
     });
 
     expect(onDismiss).toHaveBeenCalledTimes(1);
diff --git a/packages/story-editor/src/components/canvas/rightClickMenu.js b/packages/story-editor/src/components/canvas/rightClickMenu.js
index 9a451b5175c6..df336294eafb 100644
--- a/packages/story-editor/src/components/canvas/rightClickMenu.js
+++ b/packages/story-editor/src/components/canvas/rightClickMenu.js
@@ -56,6 +56,7 @@ const RightClickMenu = () => {
             'web-stories'
           )}
           maskRef={maskRef}
+          onMouseDown={(evt) => evt.stopPropagation()}
         />
       </RightClickMenuContainer>
     </DirectionAware>,
diff --git a/packages/story-editor/src/components/canvas/selectionCanvas.js b/packages/story-editor/src/components/canvas/selectionCanvas.js
index 1d080eadc8c0..5a99a6c2f118 100644
--- a/packages/story-editor/src/components/canvas/selectionCanvas.js
+++ b/packages/story-editor/src/components/canvas/selectionCanvas.js
@@ -129,7 +129,7 @@ function SelectionCanvas({ children }) {
   };
 
   const onMouseDown = (evt) => {
-    // Selecting the background element should be handeled at the frameElement level
+    // Selecting the background element should be handled at the frameElement level
     if (!nodesById[currentPage.elements[0].id].contains(evt.target)) {
       if (selectedElements.length) {
         clearSelection();