From 5802e6eff0ce04d03a5887a20e72212d899b19b3 Mon Sep 17 00:00:00 2001
From: Lingfan Gao <lingfangao@hotmail.com>
Date: Tue, 25 Apr 2023 15:57:20 +0200
Subject: [PATCH 1/2] fix: Menu should not steal focus on re-render

Follow up from #27414. The focusing effect should not re-run if the
value of `firstMount` changes.
---
 .../src/components/Menu/Menu.cy.tsx           | 37 ++++++++++++++++++-
 .../src/components/Menu/useMenu.tsx           |  4 +-
 2 files changed, 39 insertions(+), 2 deletions(-)

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
index 6aec751ad2b68..03c8b64f4e585 100644
--- a/packages/react-components/react-menu/src/components/Menu/Menu.cy.tsx
+++ b/packages/react-components/react-menu/src/components/Menu/Menu.cy.tsx
@@ -132,6 +132,41 @@ describe('MenuTrigger', () => {
     );
     cy.get(menuTriggerSelector).should('not.be.focused');
   });
+
+  it('should not focus itself after re-render', () => {
+    const Example = () => {
+      const [count, setCount] = React.useState(0);
+
+      React.useEffect(() => {
+        // trigger 2 re-renders to make sure that the focus effect has finished running
+        // after first re-render
+        if (count < 2) {
+          setCount(c => c + 1);
+        }
+      }, [count]);
+
+      return (
+        <>
+          <Menu>
+            <MenuTrigger disableButtonEnhancement>
+              <button data-status={count < 2 ? 'incomplete' : 'complete'} id={menuTriggerId}>
+                Menu
+              </button>
+            </MenuTrigger>
+            <MenuPopover>
+              <MenuList>
+                <MenuItem>Item</MenuItem>
+              </MenuList>
+            </MenuPopover>
+          </Menu>
+          <input type="text" />
+        </>
+      );
+    };
+
+    mount(<Example />);
+    cy.get(menuTriggerSelector).should('have.attr', 'data-status', 'complete').should('not.be.focused');
+  });
 });
 
 describe('Custom Trigger', () => {
@@ -391,7 +426,7 @@ describe('MenuItemRadio', () => {
 });
 
 describe('Menu', () => {
-  it('should not focus trigger on dismiss if another elemnt is focused', () => {
+  it('should not focus trigger on dismiss if another element is focused', () => {
     mount(
       <>
         <Menu>
diff --git a/packages/react-components/react-menu/src/components/Menu/useMenu.tsx b/packages/react-components/react-menu/src/components/Menu/useMenu.tsx
index 5030194e69e75..cf6c19f807ca0 100644
--- a/packages/react-components/react-menu/src/components/Menu/useMenu.tsx
+++ b/packages/react-components/react-menu/src/components/Menu/useMenu.tsx
@@ -292,7 +292,9 @@ const useMenuOpenState = (
         }
       }
     }
-  }, [state.triggerRef, state.isSubmenu, open, focusFirst, firstMount, targetDocument, state.menuPopoverRef]);
+    // firstMount change should not re-run this effect
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [state.triggerRef, state.isSubmenu, open, focusFirst, targetDocument, state.menuPopoverRef]);
 
   return [open, setOpen] as const;
 };

From ecf6016526addd1d5f36e47b851c81e183f0751c Mon Sep 17 00:00:00 2001
From: Lingfan Gao <lingfangao@hotmail.com>
Date: Tue, 25 Apr 2023 16:02:08 +0200
Subject: [PATCH 2/2] changefile

---
 ...ui-react-menu-219a86a1-336b-4011-9f84-a69f77ffcf64.json | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 change/@fluentui-react-menu-219a86a1-336b-4011-9f84-a69f77ffcf64.json

diff --git a/change/@fluentui-react-menu-219a86a1-336b-4011-9f84-a69f77ffcf64.json b/change/@fluentui-react-menu-219a86a1-336b-4011-9f84-a69f77ffcf64.json
new file mode 100644
index 0000000000000..39639448387eb
--- /dev/null
+++ b/change/@fluentui-react-menu-219a86a1-336b-4011-9f84-a69f77ffcf64.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "fix: Menu should not steal focus on re-render",
+  "packageName": "@fluentui/react-menu",
+  "email": "lingfangao@hotmail.com",
+  "dependentChangeType": "patch"
+}