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