Adding contextmenu to the list of event the callout dismisses on

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": "[email protected]",
+  "dependentChangeType": "patch"
+}

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(
+      <div>
+        <button>button</button>
+        <Callout target="#target" onDismiss={onDismiss}>
+          <div>Content</div>
+        </Callout>
+      </div>,
+    );
+
+    act(() => {
+      jest.runAllTimers();
+      getByText('button').dispatchEvent(new MouseEvent('contextmenu'));
+    });
+
+    expect(onDismiss).toHaveBeenCalled();
+  });
+
   it('will correctly return focus to element that spawned it', () => {
     jest.useFakeTimers();
 

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