Merge pull request #40234 from software-mansion-labs/fix/focus-sync-s…

…election-list Add shouldSyncFocus prop to ListItem components
Expensify · Apr 18, 2024 · a573219 · a573219
2 parents 447c7c9 + 9db05c7
commit a573219
Show file tree

Hide file tree

Showing 7 changed files with 26 additions and 2 deletions.
diff --git a/src/components/SelectionList/BaseListItem.tsx b/src/components/SelectionList/BaseListItem.tsx
@@ -28,6 +28,7 @@ function BaseListItem<TItem extends ListItem>({
     FooterComponent,
     children,
     isFocused,
+    shouldSyncFocus = true,
     onFocus = () => {},
     hoverStyle,
 }: BaseListItemProps<TItem>) {
@@ -38,7 +39,7 @@ function BaseListItem<TItem extends ListItem>({
     const pressableRef = useRef<View | HTMLDivElement>(null);
 
     // Sync focus on an item
-    useSyncFocus(pressableRef, Boolean(isFocused));
+    useSyncFocus(pressableRef, Boolean(isFocused && shouldSyncFocus));
 
     const rightHandSideComponentRender = () => {
         if (canSelectMultiple || !rightHandSideComponent) {

diff --git a/src/components/SelectionList/BaseSelectionList.tsx b/src/components/SelectionList/BaseSelectionList.tsx
@@ -93,6 +93,7 @@ function BaseSelectionList<TItem extends ListItem>(
     const [itemsToHighlight, setItemsToHighlight] = useState<Set<string> | null>(null);
     const itemFocusTimeoutRef = useRef<NodeJS.Timeout | null>(null);
     const [currentPage, setCurrentPage] = useState(1);
+    const isTextInputFocusedRef = useRef<boolean>(false);
 
     const incrementPage = () => setCurrentPage((prev) => prev + 1);
 
@@ -354,7 +355,8 @@ function BaseSelectionList<TItem extends ListItem>(
                 rightHandSideComponent={rightHandSideComponent}
                 keyForList={item.keyForList ?? ''}
                 isMultilineSupported={isRowMultilineSupported}
-                onFocus={() => setFocusedIndex(index)}
+                onFocus={() => setFocusedIndex(normalizedIndex)}
+                shouldSyncFocus={!isTextInputFocusedRef.current}
             />
         );
     };
@@ -527,6 +529,8 @@ function BaseSelectionList<TItem extends ListItem>(
                                         textInputRef.current = element as RNTextInput;
                                     }
                                 }}
+                                onFocus={() => (isTextInputFocusedRef.current = true)}
+                                onBlur={() => (isTextInputFocusedRef.current = false)}
                                 label={textInputLabel}
                                 accessibilityLabel={textInputLabel}
                                 hint={textInputHint}

diff --git a/src/components/SelectionList/InviteMemberListItem.tsx b/src/components/SelectionList/InviteMemberListItem.tsx
@@ -26,6 +26,8 @@ function InviteMemberListItem<TItem extends ListItem>({
     onDismissError,
     shouldPreventDefaultFocusOnSelectRow,
     rightHandSideComponent,
+    onFocus,
+    shouldSyncFocus,
 }: InviteMemberListItemProps<TItem>) {
     const styles = useThemeStyles();
     const theme = useTheme();
@@ -66,6 +68,8 @@ function InviteMemberListItem<TItem extends ListItem>({
                 ) : undefined
             }
             keyForList={item.keyForList}
+            onFocus={onFocus}
+            shouldSyncFocus={shouldSyncFocus}
         >
             {(hovered?: boolean) => (
                 <>

diff --git a/src/components/SelectionList/RadioListItem.tsx b/src/components/SelectionList/RadioListItem.tsx
@@ -17,6 +17,7 @@ function RadioListItem<TItem extends ListItem>({
     rightHandSideComponent,
     isMultilineSupported = false,
     onFocus,
+    shouldSyncFocus,
 }: RadioListItemProps<TItem>) {
     const styles = useThemeStyles();
     const fullTitle = isMultilineSupported ? item.text?.trimStart() : item.text;
@@ -36,6 +37,7 @@ function RadioListItem<TItem extends ListItem>({
             rightHandSideComponent={rightHandSideComponent}
             keyForList={item.keyForList}
             onFocus={onFocus}
+            shouldSyncFocus={shouldSyncFocus}
         >
             <>
                 <View style={[styles.flex1, styles.alignItemsStart]}>

diff --git a/src/components/SelectionList/TableListItem.tsx b/src/components/SelectionList/TableListItem.tsx
@@ -24,6 +24,7 @@ function TableListItem<TItem extends ListItem>({
     shouldPreventDefaultFocusOnSelectRow,
     rightHandSideComponent,
     onFocus,
+    shouldSyncFocus,
 }: TableListItemProps<TItem>) {
     const styles = useThemeStyles();
     const theme = useTheme();
@@ -58,6 +59,7 @@ function TableListItem<TItem extends ListItem>({
             pendingAction={item.pendingAction}
             keyForList={item.keyForList}
             onFocus={onFocus}
+            shouldSyncFocus={shouldSyncFocus}
             hoverStyle={item.isSelected && styles.activeComponentBG}
         >
             {(hovered) => (

diff --git a/src/components/SelectionList/UserListItem.tsx b/src/components/SelectionList/UserListItem.tsx
@@ -27,6 +27,8 @@ function UserListItem<TItem extends ListItem>({
     onDismissError,
     shouldPreventDefaultFocusOnSelectRow,
     rightHandSideComponent,
+    onFocus,
+    shouldSyncFocus,
 }: UserListItemProps<TItem>) {
     const styles = useThemeStyles();
     const theme = useTheme();
@@ -67,6 +69,8 @@ function UserListItem<TItem extends ListItem>({
                 ) : undefined
             }
             keyForList={item.keyForList}
+            onFocus={onFocus}
+            shouldSyncFocus={shouldSyncFocus}
         >
             {(hovered?: boolean) => (
                 <>

diff --git a/src/components/SelectionList/types.ts b/src/components/SelectionList/types.ts
@@ -139,6 +139,12 @@ type ListItemProps<TItem extends ListItem> = CommonListItemProps<TItem> & {
 
     /** Key used internally by React */
     keyForList?: string;
+
+    /**
+     * Whether the focus on the element should be synchronized. For example it should be set to false when the text input above list items is currently focused.
+     * When we type something into the text input, the first element found is focused, in this situation we should not synchronize the focus on the element because we will lose the focus from the text input.
+     */
+    shouldSyncFocus?: boolean;
 };
 
 type BaseListItemProps<TItem extends ListItem> = CommonListItemProps<TItem> & {
@@ -149,6 +155,7 @@ type BaseListItemProps<TItem extends ListItem> = CommonListItemProps<TItem> & {
     pendingAction?: PendingAction | null;
     FooterComponent?: ReactElement;
     children?: ReactElement<ListItemProps<TItem>> | ((hovered: boolean) => ReactElement<ListItemProps<TItem>>);
+    shouldSyncFocus?: boolean;
     hoverStyle?: StyleProp<ViewStyle>;
 };