bugfix: disable menu opening if contextmenu event is prevented (#28718)

microsoft · Aug 3, 2023 · 44b1282 · 44b1282
1 parent a5aa130
commit 44b1282
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 1 deletion.
diff --git a/change/@fluentui-react-menu-e3ad7a8c-1083-4535-90f9-b4dc318a6dce.json b/change/@fluentui-react-menu-e3ad7a8c-1083-4535-90f9-b4dc318a6dce.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "bugfix: disable menu opening if contextmenu event is prevented",
+  "packageName": "@fluentui/react-menu",
+  "email": "bernardo.sunderhus@gmail.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/react-components/react-menu/src/components/Menu/Menu.cy.tsx b/packages/react-components/react-menu/src/components/Menu/Menu.cy.tsx
@@ -1051,6 +1051,14 @@ describe('Context menu', () => {
     cy.get(menuTriggerSelector).rightclick().get(menuSelector).should('exist');
   });
 
+  it('should not open if event is prevented', () => {
+    mount(<ContextMenuExample />);
+    cy.get(menuTriggerSelector).then(([trigger]) => {
+      trigger.addEventListener('contextmenu', e => e.preventDefault(), { capture: true, once: true });
+    });
+    cy.get(menuTriggerSelector).rightclick().get(menuSelector).should('not.exist');
+  });
+
   it('should close when the trigger is clicked', () => {
     mount(<ContextMenuExample />);
 

diff --git a/packages/react-components/react-menu/src/components/MenuTrigger/useMenuTrigger.ts b/packages/react-components/react-menu/src/components/MenuTrigger/useMenuTrigger.ts
@@ -50,7 +50,7 @@ export const useMenuTrigger_unstable = (props: MenuTriggerProps): MenuTriggerSta
   const child = getTriggerChild(children);
 
   const onContextMenu = (event: React.MouseEvent<HTMLButtonElement & HTMLAnchorElement & HTMLDivElement>) => {
-    if (isTargetDisabled(event)) {
+    if (isTargetDisabled(event) || event.isDefaultPrevented()) {
       return;
     }