Sync keyboard navigation in SelectionList and PopoverMenu

src/components/MenuItem.tsx

@@ -246,6 +246,9 @@ type MenuItemBaseProps = {
 
     /** Adds padding to the left of the text when there is no icon. */
     shouldPutLeftPaddingWhenNoIcon?: boolean;
+
+    /** Handles what to do when the item is focused */
+    onFocus?: () => void;
 };
 
 type MenuItemProps = (IconProps | AvatarProps | NoIcon) & MenuItemBaseProps;
@@ -317,6 +320,7 @@ function MenuItem(
         contentFit = 'cover',
         isPaneMenu = false,
         shouldPutLeftPaddingWhenNoIcon = false,
+        onFocus,
     }: MenuItemProps,
     ref: ForwardedRef<View>,
 ) {
@@ -447,6 +451,7 @@ function MenuItem(
                         role={CONST.ROLE.MENUITEM}
                         accessibilityLabel={title ? title.toString() : ''}
                         accessible
+                        onFocus={onFocus}
                     >
                         {({pressed}) => (
                             <>

src/components/PopoverMenu.tsx

@@ -12,6 +12,7 @@ import type AnchorAlignment from '@src/types/utils/AnchorAlignment';
 import * as Expensicons from './Icon/Expensicons';
 import type {MenuItemProps} from './MenuItem';
 import MenuItem from './MenuItem';
+import PopoverMenuListItem from './PopoverMenuItem';
 import PopoverWithMeasuredContent from './PopoverWithMeasuredContent';
 import Text from './Text';
 
@@ -193,7 +194,7 @@ function PopoverMenu({
                 {!!headerText && <Text style={[styles.createMenuHeaderText, styles.ml3]}>{headerText}</Text>}
                 {enteredSubMenuIndexes.length > 0 && renderBackButtonItem()}
                 {currentMenuItems.map((item, menuIndex) => (
-                    <MenuItem
+                    <PopoverMenuListItem
                         key={item.text}
                         icon={item.icon}
                         iconWidth={item.iconWidth}
@@ -215,6 +216,7 @@ function PopoverMenu({
                         floatRightAvatarSize={item.floatRightAvatarSize}
                         shouldShowSubscriptRightAvatar={item.shouldShowSubscriptRightAvatar}
                         disabled={item.disabled}
+                        onFocus={() => setFocusedIndex(menuIndex)}
                     />
                 ))}
             </View>

src/components/PopoverMenuItem.tsx

@@ -0,0 +1,29 @@
+import React, {useLayoutEffect, useRef} from 'react';
+import type {View} from 'react-native';
+import MenuItem from './MenuItem';
+import type {MenuItemProps} from './MenuItem';
+
+function PopoverMenuItem(props: MenuItemProps) {
+    const ref = useRef<View>(null);
+
+    // Sync focus on an item
+    useLayoutEffect(() => {
+        if (!props.focused) {
+            return;
+        }
+
+        ref?.current?.focus();
+    }, [props.focused]);
+
+    return (
+        <MenuItem
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...props}
+            ref={ref}
+        />
+    );
+}
+
+PopoverMenuItem.displayName = 'PopoverMenuItem';
+
+export default PopoverMenuItem;

src/components/SelectionList/BaseListItem.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useLayoutEffect, useRef} from 'react';
 import {View} from 'react-native';
 import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
@@ -31,12 +31,16 @@ function BaseListItem<TItem extends ListItem>({
     pendingAction,
     FooterComponent,
     children,
+    isFocused,
+    onFocus = () => {},
 }: BaseListItemProps<TItem>) {
     const theme = useTheme();
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
     const {hovered, bind} = useHover();
 
+    const pressableRef = useRef<View | HTMLDivElement>(null);
+
     const rightHandSideComponentRender = () => {
         if (canSelectMultiple || !rightHandSideComponent) {
             return null;
@@ -57,6 +61,14 @@ function BaseListItem<TItem extends ListItem>({
         }
     };
 
+    // Sync focus on an item
+    useLayoutEffect(() => {
+        if (!isFocused) {
+            return;
+        }
+        pressableRef?.current?.focus();
+    }, [isFocused]);
+
     return (
         <OfflineWithFeedback
             onClose={() => onDismissError(item)}
@@ -68,6 +80,7 @@ function BaseListItem<TItem extends ListItem>({
             <PressableWithFeedback
                 // eslint-disable-next-line react/jsx-props-no-spreading
                 {...bind}
+                ref={pressableRef}
                 onPress={() => onSelectRow(item)}
                 disabled={isDisabled}
                 accessibilityLabel={item.text ?? ''}
@@ -78,6 +91,7 @@ function BaseListItem<TItem extends ListItem>({
                 onMouseDown={shouldPreventDefaultFocusOnSelectRow ? (e) => e.preventDefault() : undefined}
                 nativeID={keyForList ?? ''}
                 style={pressableStyle}
+                onFocus={onFocus}
             >
                 <View style={wrapperStyle}>
                     {canSelectMultiple && checkmarkPosition === CONST.DIRECTION.LEFT && (