Fix search type popover has 2 items highlighted

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 to the selected item, preventing user experience disruption.
+        setFocusedIndex(currentMenuItemsFocusedIndex);
+    }, [isVisible, currentMenuItemsFocusedIndex, setFocusedIndex]);
+
     return (
         <PopoverWithMeasuredContent
             anchorPosition={anchorPosition}