Make sure the first result in most recents is highlighted when user uses CMD+K

src/components/Search/SearchRouter/SearchRouter.tsx

@@ -17,6 +17,7 @@ import usePolicy from '@hooks/usePolicy';
 import useResponsiveLayout from '@hooks/useResponsiveLayout';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as CardUtils from '@libs/CardUtils';
+import getPlatform from '@libs/getPlatform';
 import * as OptionsListUtils from '@libs/OptionsListUtils';
 import {getAllTaxRates} from '@libs/PolicyUtils';
 import type {OptionData} from '@libs/ReportUtils';
@@ -57,6 +58,9 @@ function SearchRouter({onRouterClose}: SearchRouterProps) {
     const [autocompleteSuggestions, setAutocompleteSuggestions] = useState<AutocompleteItemData[] | undefined>([]);
     const [autocompleteSubstitutions, setAutocompleteSubstitutions] = useState<SubstitutionMap>({});
 
+    const isWeb = getPlatform() === CONST.PLATFORM.WEB;
+    const isDesktop = getPlatform() === CONST.PLATFORM.DESKTOP;
+
     const {shouldUseNarrowLayout} = useResponsiveLayout();
     const listRef = useRef<SelectionListHandle>(null);
 
@@ -325,6 +329,18 @@ function SearchRouter({onRouterClose}: SearchRouterProps) {
         Report.searchInServer(debouncedInputValue.trim());
     }, [debouncedInputValue]);
 
+    const setInitialFocus = useCallback(() => {
+        const initialFocusIndex = (sortedRecentSearches?.slice(0, 5).length ?? 0) + (contextualReportData ? 1 : 0);
+        listRef.current?.setFocusedIndex(initialFocusIndex, false);
+    }, [sortedRecentSearches, contextualReportData]);
+
+    useEffect(() => {
+        if ((!isWeb && !isDesktop) || textInputValue) {
+            return;
+        }
+        setInitialFocus();
+    }, [setInitialFocus, textInputValue, isWeb, isDesktop]);
+
     const onSearchChange = useCallback(
         (userQuery: string) => {
             let newUserQuery = userQuery;
@@ -340,11 +356,13 @@ function SearchRouter({onRouterClose}: SearchRouterProps) {
 
             if (newUserQuery) {
                 listRef.current?.updateAndScrollToFocusedIndex(0);
-            } else {
+            } else if (!isWeb && !isDesktop) {
                 listRef.current?.updateAndScrollToFocusedIndex(-1);
+            } else {
+                setInitialFocus();
             }
         },
-        [autocompleteSubstitutions, autocompleteSuggestions, setTextInputValue, updateAutocomplete],
+        [autocompleteSubstitutions, autocompleteSuggestions, setTextInputValue, updateAutocomplete, setInitialFocus, isWeb, isDesktop],
     );
 
     const onSearchSubmit = useCallback(

src/components/Search/SearchRouter/SearchRouterList.tsx

@@ -273,6 +273,7 @@ function SearchRouterList(
             sectionTitleStyles={styles.mhn2}
             shouldSingleExecuteRowSelect
             onArrowFocus={onArrowFocus}
+            shouldScrollToFocusedIndexOnFirstRender={false}
         />
     );
 }

src/components/SelectionList/BaseSelectionList.tsx

@@ -114,6 +114,7 @@ function BaseSelectionList<TItem extends ListItem>(
         shouldKeepFocusedItemAtTopOfViewableArea = false,
         shouldDebounceScrolling = false,
         shouldPreventActiveCellVirtualization = false,
+        shouldScrollToFocusedIndexOnFirstRender = true,
     }: BaseSelectionListProps<TItem>,
     ref: ForwardedRef<SelectionListHandle>,
 ) {
@@ -316,12 +317,14 @@ function BaseSelectionList<TItem extends ListItem>(
         maxIndex: Math.min(flattenedSections.allOptions.length - 1, CONST.MAX_SELECTION_LIST_PAGE_LENGTH * currentPage - 1),
         disabledIndexes: disabledArrowKeyIndexes,
         isActive: isFocused,
-        onFocusedIndexChange: (index: number) => {
+        onFocusedIndexChange: (index: number, shouldScrollToIndex = true) => {
             const focusedItem = flattenedSections.allOptions.at(index);
             if (focusedItem) {
                 onArrowFocus(focusedItem);
             }
-            (shouldDebounceScrolling ? debouncedScrollToIndex : scrollToIndex)(index, true);
+            if (shouldScrollToIndex) {
+                (shouldDebounceScrolling ? debouncedScrollToIndex : scrollToIndex)(index, true);
+            }
         },
         isFocused,
     });
@@ -586,10 +589,12 @@ function BaseSelectionList<TItem extends ListItem>(
             if (!isInitialSectionListRender) {
                 return;
             }
-            scrollToIndex(focusedIndex, false);
+            if (shouldScrollToFocusedIndexOnFirstRender) {
+                scrollToIndex(focusedIndex, false);
+            }
             setIsInitialSectionListRender(false);
         },
-        [focusedIndex, isInitialSectionListRender, scrollToIndex, shouldUseDynamicMaxToRenderPerBatch],
+        [focusedIndex, isInitialSectionListRender, scrollToIndex, shouldUseDynamicMaxToRenderPerBatch, shouldScrollToFocusedIndexOnFirstRender],
     );
 
     const onSectionListLayout = useCallback(
@@ -713,12 +718,13 @@ function BaseSelectionList<TItem extends ListItem>(
         isTextInputFocusedRef.current = isTextInputFocused;
     }, []);
 
-    useImperativeHandle(ref, () => ({scrollAndHighlightItem, clearInputAfterSelect, updateAndScrollToFocusedIndex, updateExternalTextInputFocus, scrollToIndex}), [
+    useImperativeHandle(ref, () => ({scrollAndHighlightItem, clearInputAfterSelect, updateAndScrollToFocusedIndex, updateExternalTextInputFocus, scrollToIndex, setFocusedIndex}), [
         scrollAndHighlightItem,
         clearInputAfterSelect,
         updateAndScrollToFocusedIndex,
         updateExternalTextInputFocus,
         scrollToIndex,
+        setFocusedIndex,
     ]);
 
     /** Selects row when pressing Enter */

src/components/SelectionList/types.ts

@@ -612,12 +612,16 @@ type BaseSelectionListProps<TItem extends ListItem> = Partial<ChildrenProps> & {
 
     /** Whether to prevent the active cell from being virtualized and losing focus in browsers */
     shouldPreventActiveCellVirtualization?: boolean;
+
+    /** Whether to scroll to the focused index on the first render. */
+    shouldScrollToFocusedIndexOnFirstRender?: boolean;
 } & TRightHandSideComponent<TItem>;
 
 type SelectionListHandle = {
     scrollAndHighlightItem?: (items: string[], timeout: number) => void;
     clearInputAfterSelect?: () => void;
     scrollToIndex: (index: number, animated?: boolean) => void;
+    setFocusedIndex: (index: number, shouldScrollToIndex?: boolean) => void;
     updateAndScrollToFocusedIndex: (newFocusedIndex: number) => void;
     updateExternalTextInputFocus: (isTextInputFocused: boolean) => void;
 };

src/hooks/useArrowKeyFocusManager.ts

@@ -5,7 +5,7 @@ import usePrevious from './usePrevious';
 
 type Config = {
     maxIndex: number;
-    onFocusedIndexChange?: (index: number) => void;
+    onFocusedIndexChange?: (index: number, shouldScrollToIndex?: boolean) => void;
     initialFocusedIndex?: number;
     disabledIndexes?: readonly number[];
     shouldExcludeTextAreaNodes?: boolean;
@@ -17,7 +17,7 @@ type Config = {
     isFocused?: boolean;
 };
 
-type UseArrowKeyFocusManager = [number, (index: number) => void];
+type UseArrowKeyFocusManager = [number, (index: number, shouldScrollToIndex?: boolean) => void];
 
 /**
  * A hook that makes it easy to use the arrow keys to manage focus of items in a list
@@ -51,8 +51,15 @@ export default function useArrowKeyFocusManager({
     allowNegativeIndexes = false,
     isFocused = true,
 }: Config): UseArrowKeyFocusManager {
-    const [focusedIndex, setFocusedIndex] = useState(initialFocusedIndex);
+    const [focusedIndex, setFocusedIndexState] = useState(initialFocusedIndex);
+    const [shouldScrollToIndex, setShouldScrollToIndex] = useState(true);
     const prevIsFocusedIndex = usePrevious(focusedIndex);
+
+    const setFocusedIndex = useCallback((index: number, shouldScroll = true) => {
+        setFocusedIndexState(index);
+        setShouldScrollToIndex(shouldScroll);
+    }, []);
+
     const arrowConfig = useMemo(
         () => ({
             excludedNodes: shouldExcludeTextAreaNodes ? ['TEXTAREA'] : [],
@@ -73,7 +80,7 @@ export default function useArrowKeyFocusManager({
         if (prevIsFocusedIndex === focusedIndex) {
             return;
         }
-        onFocusedIndexChange(focusedIndex);
+        onFocusedIndexChange(focusedIndex, shouldScrollToIndex);
         // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps
     }, [focusedIndex, prevIsFocusedIndex]);
 
@@ -83,7 +90,8 @@ export default function useArrowKeyFocusManager({
         }
         const nextIndex = disableCyclicTraversal ? -1 : maxIndex;
 
-        setFocusedIndex((actualIndex) => {
+        setShouldScrollToIndex(true);
+        setFocusedIndexState((actualIndex) => {
             const currentFocusedIndex = actualIndex > 0 ? actualIndex - (itemsPerRow ?? 1) : nextIndex;
             let newFocusedIndex = currentFocusedIndex;
 
@@ -116,7 +124,8 @@ export default function useArrowKeyFocusManager({
 
         const nextIndex = disableCyclicTraversal ? maxIndex : 0;
 
-        setFocusedIndex((actualIndex) => {
+        setShouldScrollToIndex(true);
+        setFocusedIndexState((actualIndex) => {
             let currentFocusedIndex = -1;
 
             if (actualIndex === -1) {
@@ -161,7 +170,8 @@ export default function useArrowKeyFocusManager({
 
         const nextIndex = disableCyclicTraversal ? -1 : maxIndex;
 
-        setFocusedIndex((actualIndex) => {
+        setShouldScrollToIndex(true);
+        setFocusedIndexState((actualIndex) => {
             const currentFocusedIndex = actualIndex > 0 ? actualIndex - 1 : nextIndex;
 
             let newFocusedIndex = currentFocusedIndex;
@@ -187,7 +197,8 @@ export default function useArrowKeyFocusManager({
 
         const nextIndex = disableCyclicTraversal ? maxIndex : 0;
 
-        setFocusedIndex((actualIndex) => {
+        setShouldScrollToIndex(true);
+        setFocusedIndexState((actualIndex) => {
             const currentFocusedIndex = actualIndex < maxIndex ? actualIndex + 1 : nextIndex;
 
             let newFocusedIndex = currentFocusedIndex;