From f3f35e5fa3fb757240eed635347cef3b34c6bcb5 Mon Sep 17 00:00:00 2001
From: Jorge Olivares <jorgeol@microsoft.com>
Date: Mon, 3 Oct 2022 14:37:59 -0400
Subject: [PATCH 1/4] Adding contextmenu to the list of event the callout
 dismisses on

---
 packages/react/src/components/Callout/CalloutContent.base.tsx | 1 +
 1 file changed, 1 insertion(+)

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

From 99ca7f11f94c7e24b5e5874f46658b3f50121ef2 Mon Sep 17 00:00:00 2001
From: Jorge Olivares <jorgeol@microsoft.com>
Date: Mon, 24 Oct 2022 16:15:50 -0400
Subject: [PATCH 2/4] Adding change files and test

---
 ...-abafa1d3-0967-4090-b396-d04f877fccbc.json |  7 ++++++
 .../ContextualMenu/ContextualMenu.test.tsx    | 23 +++++++++++++++++++
 2 files changed, 30 insertions(+)
 create mode 100644 change/@fluentui-react-abafa1d3-0967-4090-b396-d04f877fccbc.json

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/ContextualMenu/ContextualMenu.test.tsx b/packages/react/src/components/ContextualMenu/ContextualMenu.test.tsx
index c0b1a45a8b5772..d0713b25e3390c 100644
--- a/packages/react/src/components/ContextualMenu/ContextualMenu.test.tsx
+++ b/packages/react/src/components/ContextualMenu/ContextualMenu.test.tsx
@@ -185,6 +185,29 @@ describe('ContextualMenu', () => {
     expect(onDismissSpy).toHaveBeenCalled();
   });
 
+  it('menu closes on contextualMenu event(right click)', () => {
+    const items: IContextualMenuItem[] = [
+      { text: 'TestText 1', key: 'TestKey1' },
+      { text: 'TestText 2', key: 'TestKey2' },
+      { text: 'TestText 3', key: 'TestKey3' },
+      { text: 'TestText 4', key: 'TestKey4' },
+    ];
+
+    const onDismissSpy = jest.fn();
+
+    ReactTestUtils.act(() => {
+      ReactTestUtils.renderIntoDocument<IContextualMenuProps>(
+        <ContextualMenu items={items} onDismiss={onDismissSpy} />,
+      );
+    });
+
+    const menuList = document.querySelector('ul.ms-ContextualMenu-list') as HTMLUListElement;
+    ReactTestUtils.act(() => {
+      ReactTestUtils.Simulate.contextMenu(menuList);
+    });
+
+    expect(onDismissSpy).toHaveBeenCalled();
+  });
   it('menu closes on alt + up arrow', () => {
     const items: IContextualMenuItem[] = [
       { text: 'TestText 1', key: 'TestKey1' },

From e88646f46420b685bf05477e6758e383adf1e522 Mon Sep 17 00:00:00 2001
From: Jorge Olivares <jorgeol@microsoft.com>
Date: Mon, 24 Oct 2022 17:25:58 -0400
Subject: [PATCH 3/4] Removing test

---
 .../ContextualMenu/ContextualMenu.test.tsx    | 23 -------------------
 1 file changed, 23 deletions(-)

diff --git a/packages/react/src/components/ContextualMenu/ContextualMenu.test.tsx b/packages/react/src/components/ContextualMenu/ContextualMenu.test.tsx
index d0713b25e3390c..c0b1a45a8b5772 100644
--- a/packages/react/src/components/ContextualMenu/ContextualMenu.test.tsx
+++ b/packages/react/src/components/ContextualMenu/ContextualMenu.test.tsx
@@ -185,29 +185,6 @@ describe('ContextualMenu', () => {
     expect(onDismissSpy).toHaveBeenCalled();
   });
 
-  it('menu closes on contextualMenu event(right click)', () => {
-    const items: IContextualMenuItem[] = [
-      { text: 'TestText 1', key: 'TestKey1' },
-      { text: 'TestText 2', key: 'TestKey2' },
-      { text: 'TestText 3', key: 'TestKey3' },
-      { text: 'TestText 4', key: 'TestKey4' },
-    ];
-
-    const onDismissSpy = jest.fn();
-
-    ReactTestUtils.act(() => {
-      ReactTestUtils.renderIntoDocument<IContextualMenuProps>(
-        <ContextualMenu items={items} onDismiss={onDismissSpy} />,
-      );
-    });
-
-    const menuList = document.querySelector('ul.ms-ContextualMenu-list') as HTMLUListElement;
-    ReactTestUtils.act(() => {
-      ReactTestUtils.Simulate.contextMenu(menuList);
-    });
-
-    expect(onDismissSpy).toHaveBeenCalled();
-  });
   it('menu closes on alt + up arrow', () => {
     const items: IContextualMenuItem[] = [
       { text: 'TestText 1', key: 'TestKey1' },

From fceef5484f0a13b31932c0a60d55959844cc916b Mon Sep 17 00:00:00 2001
From: Jorge Olivares <jorgeol@microsoft.com>
Date: Mon, 24 Oct 2022 18:26:13 -0400
Subject: [PATCH 4/4] Writting tests for right click dismissing contextMenu

---
 .../src/components/Callout/Callout.test.tsx   | 21 +++++++++++++++++++
 1 file changed, 21 insertions(+)

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(
+      <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();