fix navigate to detail page on enter for highlighted item

src/CONST.ts

@@ -731,6 +731,9 @@ const CONST = {
         SHIFT: {
             DEFAULT: 'shift',
         },
+        ENTER: {
+            DEFAULT: 'enter',
+        },
     },
     KEYBOARD_SHORTCUTS: {
         SEARCH: {

src/components/Search/SearchRouter/SearchRouter.tsx

@@ -122,7 +122,11 @@ function SearchRouter({onRouterClose, shouldHideInputCaret}: SearchRouterProps)
         }
         if (reportForContextualSearch.isPolicyExpenseChat) {
             roomType = CONST.SEARCH.DATA_TYPES.EXPENSE;
-            autocompleteID = reportForContextualSearch.policyID ?? '';
+            if (reportForContextualSearch.policyID) {
+                autocompleteID = reportForContextualSearch.policyID;
+            } else {
+                autocompleteID = '';
+            }
         }
 
         additionalSections.push({
@@ -283,7 +287,14 @@ function SearchRouter({onRouterClose, shouldHideInputCaret}: SearchRouterProps)
                         isFullWidth={shouldUseNarrowLayout}
                         onSearchQueryChange={onSearchQueryChange}
                         onSubmit={() => {
-                            submitSearch(textInputValue);
+                            const focusedOption = listRef.current?.getFocusedOption();
+
+                            if (!focusedOption) {
+                                submitSearch(textInputValue);
+                                return;
+                            }
+
+                            onListItemPress(focusedOption);
                         }}
                         caretHidden={shouldHideInputCaret}
                         routerListRef={listRef}

src/components/Search/SearchRouter/SearchRouterInput.tsx

@@ -9,6 +9,7 @@ import type {BaseTextInputRef} from '@components/TextInput/BaseTextInput/types';
 import useLocalize from '@hooks/useLocalize';
 import useNetwork from '@hooks/useNetwork';
 import useThemeStyles from '@hooks/useThemeStyles';
+import handleKeyPress from '@libs/SearchInputOnKeyPress';
 import shouldDelayFocus from '@libs/shouldDelayFocus';
 import variables from '@styles/variables';
 import CONST from '@src/CONST';
@@ -123,6 +124,7 @@ function SearchRouterInput(
                         }}
                         isLoading={!!isSearchingForReports}
                         ref={ref}
+                        onKeyPress={handleKeyPress(onSubmit)}
                     />
                 </View>
                 {!!rightComponent && <View style={styles.pr3}>{rightComponent}</View>}

src/components/SelectionList/BaseSelectionList.tsx

@@ -396,13 +396,23 @@ function BaseSelectionList<TItem extends ListItem>(
         }
     };
 
-    const selectFocusedOption = () => {
+    const getFocusedOption = useCallback(() => {
         const focusedOption = focusedIndex !== -1 ? flattenedSections.allOptions.at(focusedIndex) : undefined;
 
         if (!focusedOption || (focusedOption.isDisabled && !focusedOption.isSelected)) {
             return;
         }
 
+        return focusedOption;
+    }, [flattenedSections.allOptions, focusedIndex]);
+
+    const selectFocusedOption = () => {
+        const focusedOption = getFocusedOption();
+
+        if (!focusedOption) {
+            return;
+        }
+
         selectRow(focusedOption);
     };
 
@@ -734,12 +744,13 @@ function BaseSelectionList<TItem extends ListItem>(
         isTextInputFocusedRef.current = isTextInputFocused;
     }, []);
 
-    useImperativeHandle(ref, () => ({scrollAndHighlightItem, clearInputAfterSelect, updateAndScrollToFocusedIndex, updateExternalTextInputFocus, scrollToIndex}), [
+    useImperativeHandle(ref, () => ({scrollAndHighlightItem, clearInputAfterSelect, updateAndScrollToFocusedIndex, updateExternalTextInputFocus, scrollToIndex, getFocusedOption}), [
         scrollAndHighlightItem,
         clearInputAfterSelect,
         updateAndScrollToFocusedIndex,
         updateExternalTextInputFocus,
         scrollToIndex,
+        getFocusedOption,
     ]);
 
     /** Selects row when pressing Enter */

src/components/SelectionList/types.ts

@@ -641,6 +641,7 @@ type SelectionListHandle = {
     scrollToIndex: (index: number, animated?: boolean) => void;
     updateAndScrollToFocusedIndex: (newFocusedIndex: number) => void;
     updateExternalTextInputFocus: (isTextInputFocused: boolean) => void;
+    getFocusedOption: () => ListItem | undefined;
 };
 
 type ItemLayout = {

src/libs/SearchInputOnKeyPress/index.native.ts

@@ -0,0 +1,5 @@
+import type {NativeSyntheticEvent, TextInputKeyPressEventData} from 'react-native';
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+const handleKeyPress = (onSubmit: () => void) => (event: NativeSyntheticEvent<TextInputKeyPressEventData>) => {};
+export default handleKeyPress;

src/libs/SearchInputOnKeyPress/index.ts

@@ -0,0 +1,16 @@
+import type {NativeSyntheticEvent, TextInputKeyPressEventData} from 'react-native';
+import CONST from '@src/CONST';
+
+function handleKeyPress(onSubmit: () => void) {
+    return (event: NativeSyntheticEvent<TextInputKeyPressEventData>) => {
+        const isEnterKey = event.nativeEvent.key.toLowerCase() === CONST.PLATFORM_SPECIFIC_KEYS.ENTER.DEFAULT;
+
+        if (!isEnterKey) {
+            return;
+        }
+
+        onSubmit();
+    };
+}
+
+export default handleKeyPress;