diff --git a/change/@fluentui-react-native-menu-7499cad3-b53d-4e65-ac30-498b5e81638c.json b/change/@fluentui-react-native-menu-7499cad3-b53d-4e65-ac30-498b5e81638c.json new file mode 100644 index 0000000000..3235315618 --- /dev/null +++ b/change/@fluentui-react-native-menu-7499cad3-b53d-4e65-ac30-498b5e81638c.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Fix for keyboard focus is lost when hovering out of a menu", + "packageName": "@fluentui-react-native/menu", + "email": "email not defined", + "dependentChangeType": "patch" +} diff --git a/packages/components/Menu/src/MenuList/MenuList.tsx b/packages/components/Menu/src/MenuList/MenuList.tsx index d026b077f6..06039dd4ab 100644 --- a/packages/components/Menu/src/MenuList/MenuList.tsx +++ b/packages/components/Menu/src/MenuList/MenuList.tsx @@ -52,9 +52,12 @@ export const MenuList = compose({ const Slots = useSlots(menuList.props, (layer) => menuListLookup(layer, menuList, userProps)); const focusZoneRef = React.useRef(); + const setFocusZoneFocus = () => { + focusZoneRef?.current?.focus(); + }; React.useEffect(() => { - focusZoneRef?.current?.focus(); + setFocusZoneFocus(); }, []); return (_final: MenuListProps, children: React.ReactNode) => { @@ -83,7 +86,7 @@ export const MenuList = compose({ const content = Platform.OS === 'macos' ? ( - +