Merge pull request #56948 from software-mansion-labs/289Adam289/56038-fix-search-autocomplete-list-navigation

Fix SearchAutocompleteList arrow keys navigation

Author: luacmartins

src/components/Search/SearchAutocompleteList.tsx

@@ -67,6 +67,9 @@ type SearchAutocompleteListProps = {
 
     /** Callback to call when the list of autocomplete substitutions should be updated */
     updateAutocompleteSubstitutions: (item: SearchQueryItem) => void;
+
+    /** Whether to subscribe to KeyboardShortcut arrow keys events */
+    shouldSubscribeToArrowKeyEvents?: boolean;
 };
 
 const defaultListOptions = {
@@ -118,7 +121,15 @@ function SearchRouterItem(props: UserListItemProps<OptionData> | SearchQueryList
 }
 
 function SearchAutocompleteList(
-    {autocompleteQueryValue, searchQueryItem, getAdditionalSections, onListItemPress, setTextQuery, updateAutocompleteSubstitutions}: SearchAutocompleteListProps,
+    {
+        autocompleteQueryValue,
+        searchQueryItem,
+        getAdditionalSections,
+        onListItemPress,
+        setTextQuery,
+        updateAutocompleteSubstitutions,
+        shouldSubscribeToArrowKeyEvents,
+    }: SearchAutocompleteListProps,
     ref: ForwardedRef<SelectionListHandle>,
 ) {
     const styles = useThemeStyles();
@@ -490,6 +501,7 @@ function SearchAutocompleteList(
             ref={ref}
             initiallyFocusedOptionKey={!shouldUseNarrowLayout ? styledRecentReports.at(0)?.keyForList : undefined}
             shouldScrollToFocusedIndex={!isInitialRender}
+            shouldSubscribeToArrowKeyEvents={shouldSubscribeToArrowKeyEvents}
         />
     );
 }

src/components/Search/SearchPageHeader/SearchPageHeaderInput.tsx

@@ -342,6 +342,7 @@ function SearchPageHeaderInput({
                         setTextQuery={setTextAndUpdateSelection}
                         updateAutocompleteSubstitutions={updateAutocompleteSubstitutions}
                         ref={listRef}
+                        shouldSubscribeToArrowKeyEvents={isAutocompleteListVisible}
                     />
                 </View>
             </View>

src/components/SelectionList/BaseSelectionList.tsx

@@ -125,6 +125,7 @@ function BaseSelectionList<TItem extends ListItem>(
         initialNumToRender = 12,
         listItemTitleContainerStyles,
         isScreenFocused = false,
+        shouldSubscribeToArrowKeyEvents = true,
     }: BaseSelectionListProps<TItem>,
     ref: ForwardedRef<SelectionListHandle>,
 ) {
@@ -337,7 +338,7 @@ function BaseSelectionList<TItem extends ListItem>(
         initialFocusedIndex: flattenedSections.allOptions.findIndex((option) => option.keyForList === initiallyFocusedOptionKey),
         maxIndex: Math.min(flattenedSections.allOptions.length - 1, CONST.MAX_SELECTION_LIST_PAGE_LENGTH * currentPage - 1),
         disabledIndexes: disabledArrowKeyIndexes,
-        isActive: isFocused,
+        isActive: shouldSubscribeToArrowKeyEvents && isFocused,
         onFocusedIndexChange: (index: number) => {
             const focusedItem = flattenedSections.allOptions.at(index);
             if (focusedItem) {

src/components/SelectionList/types.ts

@@ -523,6 +523,9 @@ type BaseSelectionListProps<TItem extends ListItem> = Partial<ChildrenProps> & {
     /** Whether to prevent default focusing of options and focus the textinput when selecting an option */
     shouldPreventDefaultFocusOnSelectRow?: boolean;
 
+    /** Whether to subscribe to KeyboardShortcut arrow keys events */
+    shouldSubscribeToArrowKeyEvents?: boolean;
+
     /** Custom content to display in the header */
     headerContent?: ReactNode;