diff --git a/change/@fluentui-react-abafa1d3-0967-4090-b396-d04f877fccbc.json b/change/@fluentui-react-abafa1d3-0967-4090-b396-d04f877fccbc.json new file mode 100644 index 00000000000000..0a94db1f362387 --- /dev/null +++ b/change/@fluentui-react-abafa1d3-0967-4090-b396-d04f877fccbc.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Making contextual menu dismiss on right click", + "packageName": "@fluentui/react", + "email": "jorgeol@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/react/src/components/Callout/Callout.test.tsx b/packages/react/src/components/Callout/Callout.test.tsx index 32b87d469b116b..44256aa0f164b0 100644 --- a/packages/react/src/components/Callout/Callout.test.tsx +++ b/packages/react/src/components/Callout/Callout.test.tsx @@ -142,6 +142,27 @@ describe('Callout', () => { expect(onDismiss).not.toHaveBeenCalled(); }); + it('Callout dismisses on right-click', () => { + jest.useFakeTimers(); + const onDismiss = jest.fn(); + + const { getByText } = render( +
+ + +
Content
+
+
, + ); + + act(() => { + jest.runAllTimers(); + getByText('button').dispatchEvent(new MouseEvent('contextmenu')); + }); + + expect(onDismiss).toHaveBeenCalled(); + }); + it('will correctly return focus to element that spawned it', () => { jest.useFakeTimers(); diff --git a/packages/react/src/components/Callout/CalloutContent.base.tsx b/packages/react/src/components/Callout/CalloutContent.base.tsx index e9d1d2ac206c23..a80b092beb7111 100644 --- a/packages/react/src/components/Callout/CalloutContent.base.tsx +++ b/packages/react/src/components/Callout/CalloutContent.base.tsx @@ -361,6 +361,7 @@ function useDismissHandlers( on(targetWindow, 'resize', dismissOnResize, true), on(targetWindow.document.documentElement, 'focus', dismissOnLostFocus, true), on(targetWindow.document.documentElement, 'click', dismissOnLostFocus, true), + on(targetWindow.document.documentElement, 'contextmenu', dismissOnLostFocus, true), on(targetWindow, 'blur', dismissOnTargetWindowBlur, true), ];