Right Click Menu: Fix the click problems (#8895)

GoogleForCreators · Sep 7, 2021 · c81b5d8 · c81b5d8
1 parent a8cb90f
commit c81b5d8
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 9 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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();