diff --git a/src/components/Search/SearchAutocompleteList.tsx b/src/components/Search/SearchAutocompleteList.tsx index 2cd3659b6e80..4448189c77c2 100644 --- a/src/components/Search/SearchAutocompleteList.tsx +++ b/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 | SearchQueryList } function SearchAutocompleteList( - {autocompleteQueryValue, searchQueryItem, getAdditionalSections, onListItemPress, setTextQuery, updateAutocompleteSubstitutions}: SearchAutocompleteListProps, + { + autocompleteQueryValue, + searchQueryItem, + getAdditionalSections, + onListItemPress, + setTextQuery, + updateAutocompleteSubstitutions, + shouldSubscribeToArrowKeyEvents, + }: SearchAutocompleteListProps, ref: ForwardedRef, ) { const styles = useThemeStyles(); @@ -490,6 +501,7 @@ function SearchAutocompleteList( ref={ref} initiallyFocusedOptionKey={!shouldUseNarrowLayout ? styledRecentReports.at(0)?.keyForList : undefined} shouldScrollToFocusedIndex={!isInitialRender} + shouldSubscribeToArrowKeyEvents={shouldSubscribeToArrowKeyEvents} /> ); } diff --git a/src/components/Search/SearchPageHeader/SearchPageHeaderInput.tsx b/src/components/Search/SearchPageHeader/SearchPageHeaderInput.tsx index c3fea56e53db..020553d9b1f5 100644 --- a/src/components/Search/SearchPageHeader/SearchPageHeaderInput.tsx +++ b/src/components/Search/SearchPageHeader/SearchPageHeaderInput.tsx @@ -342,6 +342,7 @@ function SearchPageHeaderInput({ setTextQuery={setTextAndUpdateSelection} updateAutocompleteSubstitutions={updateAutocompleteSubstitutions} ref={listRef} + shouldSubscribeToArrowKeyEvents={isAutocompleteListVisible} /> diff --git a/src/components/SelectionList/BaseSelectionList.tsx b/src/components/SelectionList/BaseSelectionList.tsx index a1fa7c15e6cf..7ec18f288a76 100644 --- a/src/components/SelectionList/BaseSelectionList.tsx +++ b/src/components/SelectionList/BaseSelectionList.tsx @@ -125,6 +125,7 @@ function BaseSelectionList( initialNumToRender = 12, listItemTitleContainerStyles, isScreenFocused = false, + shouldSubscribeToArrowKeyEvents = true, }: BaseSelectionListProps, ref: ForwardedRef, ) { @@ -337,7 +338,7 @@ function BaseSelectionList( 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) { diff --git a/src/components/SelectionList/types.ts b/src/components/SelectionList/types.ts index fc3dd2758ab7..3eb63ae97242 100644 --- a/src/components/SelectionList/types.ts +++ b/src/components/SelectionList/types.ts @@ -523,6 +523,9 @@ type BaseSelectionListProps = Partial & { /** 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;