diff --git a/src/components/PopoverMenu.tsx b/src/components/PopoverMenu.tsx index 9b5c0b1b6f5..c628a00a89a 100644 --- a/src/components/PopoverMenu.tsx +++ b/src/components/PopoverMenu.tsx @@ -1,7 +1,7 @@ /* eslint-disable react/jsx-props-no-spreading */ import lodashIsEqual from 'lodash/isEqual'; import type {ReactNode, RefObject} from 'react'; -import React, {useLayoutEffect, useState} from 'react'; +import React, {useEffect, useLayoutEffect, useState} from 'react'; import {StyleSheet, View} from 'react-native'; import type {StyleProp, TextStyle, ViewStyle} from 'react-native'; import type {ModalProps} from 'react-native-modal'; @@ -300,7 +300,7 @@ function PopoverMenu({ ); const onModalHide = () => { - setFocusedIndex(-1); + setFocusedIndex(currentMenuItemsFocusedIndex); }; // When the menu items are changed, we want to reset the sub-menu to make sure @@ -314,6 +314,17 @@ function PopoverMenu({ setCurrentMenuItems(menuItems); }, [menuItems]); + useEffect(() => { + if (isVisible) { + return; + } + + // Update the focused item to match the selected item, but only when the popover is not visible. + // This ensures that if the popover is visible, highlight from the keyboard navigation is not overridden + // by external updates. + setFocusedIndex(currentMenuItemsFocusedIndex); + }, [isVisible, currentMenuItemsFocusedIndex, setFocusedIndex]); + return (