Sync keyboard navigation in SelectionList and PopoverMenu

src/components/ContextMenuItem.tsx

@@ -8,8 +8,8 @@ import useWindowDimensions from '@hooks/useWindowDimensions';
 import getButtonState from '@libs/getButtonState';
 import type IconAsset from '@src/types/utils/IconAsset';
 import BaseMiniContextMenuItem from './BaseMiniContextMenuItem';
+import FocusableMenuItem from './FocusableMenuItem';
 import Icon from './Icon';
-import MenuItem from './MenuItem';
 
 type ContextMenuItemProps = {
     /** Icon Component */
@@ -49,6 +49,9 @@ type ContextMenuItemProps = {
 
     /** The ref of mini context menu item */
     buttonRef?: React.RefObject<View>;
+
+    /** Handles what to do when the item is focused */
+    onFocus?: () => void;
 };
 
 type ContextMenuItemHandle = {
@@ -70,6 +73,7 @@ function ContextMenuItem(
         wrapperStyle,
         shouldPreventDefaultFocusOnPress = true,
         buttonRef = {current: null},
+        onFocus = () => {},
     }: ContextMenuItemProps,
     ref: ForwardedRef<ContextMenuItemHandle>,
 ) {
@@ -113,7 +117,7 @@ function ContextMenuItem(
             )}
         </BaseMiniContextMenuItem>
     ) : (
-        <MenuItem
+        <FocusableMenuItem
             title={itemText}
             icon={itemIcon}
             onPress={triggerPressAndUpdateSuccess}
@@ -125,6 +129,7 @@ function ContextMenuItem(
             isAnonymousAction={isAnonymousAction}
             focused={isFocused}
             interactive={isThrottledButtonActive}
+            onFocus={onFocus}
         />
     );
 }

src/components/FocusableMenuItem.tsx

@@ -0,0 +1,24 @@
+import React, {useRef} from 'react';
+import type {View} from 'react-native';
+import useSyncFocus from '@hooks/useSyncFocus';
+import type {MenuItemProps} from './MenuItem';
+import MenuItem from './MenuItem';
+
+function FocusableMenuItem(props: MenuItemProps) {
+    const ref = useRef<HTMLDivElement | View>(null);
+
+    // Sync focus on an item
+    useSyncFocus(ref, Boolean(props.focused));
+
+    return (
+        <MenuItem
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...props}
+            ref={ref}
+        />
+    );
+}
+
+FocusableMenuItem.displayName = 'FocusableMenuItem';
+
+export default FocusableMenuItem;

src/components/Hoverable/index.tsx

@@ -1,6 +1,7 @@
 import type {Ref} from 'react';
 import React, {cloneElement, forwardRef} from 'react';
 import {hasHoverSupport} from '@libs/DeviceCapabilities';
+import mergeRefs from '@libs/mergeRefs';
 import {getReturnValue} from '@libs/ValueUtils';
 import ActiveHoverable from './ActiveHoverable';
 import type HoverableProps from './types';
@@ -14,7 +15,8 @@ function Hoverable({isDisabled, ...props}: HoverableProps, ref: Ref<HTMLElement>
     // If Hoverable is disabled, just render the child without additional logic or event listeners.
     // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
     if (isDisabled || !hasHoverSupport()) {
-        return cloneElement(getReturnValue(props.children, false), {ref});
+        const child = getReturnValue(props.children, false);
+        return cloneElement(child, {ref: mergeRefs(ref, child.ref)});
     }
 
     return (

src/components/MenuItem.tsx

@@ -1,6 +1,6 @@
 import ExpensiMark from 'expensify-common/lib/ExpensiMark';
 import type {ImageContentFit} from 'expo-image';
-import type {ForwardedRef, ReactNode} from 'react';
+import type {ReactNode} from 'react';
 import React, {forwardRef, useContext, useMemo} from 'react';
 import type {GestureResponderEvent, StyleProp, TextStyle, ViewStyle} from 'react-native';
 import {View} from 'react-native';
@@ -32,6 +32,7 @@ import * as Expensicons from './Icon/Expensicons';
 import * as defaultWorkspaceAvatars from './Icon/WorkspaceDefaultAvatars';
 import {MenuItemGroupContext} from './MenuItemGroup';
 import MultipleAvatars from './MultipleAvatars';
+import type {PressableRef} from './Pressable/GenericPressable/types';
 import PressableWithSecondaryInteraction from './PressableWithSecondaryInteraction';
 import RenderHTML from './RenderHTML';
 import SelectCircle from './SelectCircle';
@@ -249,6 +250,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;
@@ -321,8 +325,9 @@ function MenuItem(
         contentFit = 'cover',
         isPaneMenu = false,
         shouldPutLeftPaddingWhenNoIcon = false,
+        onFocus,
     }: MenuItemProps,
-    ref: ForwardedRef<View>,
+    ref: PressableRef,
 ) {
     const theme = useTheme();
     const styles = useThemeStyles();
@@ -449,6 +454,7 @@ function MenuItem(
                         role={CONST.ROLE.MENUITEM}
                         accessibilityLabel={title ? title.toString() : ''}
                         accessible
+                        onFocus={onFocus}
                     >
                         {({pressed}) => (
                             <>
@@ -678,5 +684,5 @@ function MenuItem(
 
 MenuItem.displayName = 'MenuItem';
 
-export type {IconProps, AvatarProps, NoIcon, MenuItemBaseProps, MenuItemProps};
+export type {AvatarProps, IconProps, MenuItemBaseProps, MenuItemProps, NoIcon};
 export default forwardRef(MenuItem);

src/components/PopoverMenu.tsx

@@ -9,6 +9,7 @@ import useWindowDimensions from '@hooks/useWindowDimensions';
 import CONST from '@src/CONST';
 import type {AnchorPosition} from '@src/styles';
 import type AnchorAlignment from '@src/types/utils/AnchorAlignment';
+import FocusableMenuItem from './FocusableMenuItem';
 import * as Expensicons from './Icon/Expensicons';
 import type {MenuItemProps} from './MenuItem';
 import MenuItem from './MenuItem';
@@ -193,7 +194,7 @@ function PopoverMenu({
                 {!!headerText && <Text style={[styles.createMenuHeaderText, styles.ml3]}>{headerText}</Text>}
                 {enteredSubMenuIndexes.length > 0 && renderBackButtonItem()}
                 {currentMenuItems.map((item, menuIndex) => (
-                    <MenuItem
+                    <FocusableMenuItem
                         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/SelectionList/BaseListItem.tsx

@@ -1,10 +1,11 @@
-import React from 'react';
+import React, {useRef} from 'react';
 import {View} from 'react-native';
 import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
 import PressableWithFeedback from '@components/Pressable/PressableWithFeedback';
 import useHover from '@hooks/useHover';
+import useSyncFocus from '@hooks/useSyncFocus';
 import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
@@ -26,11 +27,18 @@ function BaseListItem<TItem extends ListItem>({
     pendingAction,
     FooterComponent,
     children,
+    isFocused,
+    onFocus = () => {},
 }: BaseListItemProps<TItem>) {
     const theme = useTheme();
     const styles = useThemeStyles();
     const {hovered, bind} = useHover();
 
+    const pressableRef = useRef<View | HTMLDivElement>(null);
+
+    // Sync focus on an item
+    useSyncFocus(pressableRef, Boolean(isFocused));
+
     const rightHandSideComponentRender = () => {
         if (canSelectMultiple || !rightHandSideComponent) {
             return null;
@@ -54,6 +62,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 ?? ''}
@@ -64,6 +73,7 @@ function BaseListItem<TItem extends ListItem>({
                 onMouseDown={shouldPreventDefaultFocusOnSelectRow ? (e) => e.preventDefault() : undefined}
                 nativeID={keyForList ?? ''}
                 style={pressableStyle}
+                onFocus={onFocus}
             >
                 <View style={wrapperStyle}>
                     {typeof children === 'function' ? children(hovered) : children}