Merge pull request Expensify#65822 from software-mansion-labs/fix/search-focus-issues

[CP Staging] Revert gasture handling for Search Router

Author: mountiny

src/components/Search/SearchRouter/SearchRouter.tsx

@@ -3,7 +3,6 @@ import {deepEqual} from 'fast-equals';
 import React, {forwardRef, useCallback, useEffect, useRef, useState} from 'react';
 import type {TextInputProps} from 'react-native';
 import {InteractionManager, Keyboard, View} from 'react-native';
-import {Gesture, GestureDetector, GestureHandlerRootView} from 'react-native-gesture-handler';
 import type {ValueOf} from 'type-fest';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import * as Expensicons from '@components/Icon/Expensicons';
@@ -429,64 +428,62 @@ function SearchRouter({onRouterClose, shouldHideInputCaret, isSearchRouterDispla
     const isRecentSearchesDataLoaded = !isLoadingOnyxValue(recentSearchesMetadata);
 
     return (
-        <GestureHandlerRootView style={{flex: 1}}>
-            <GestureDetector gesture={Gesture.Tap().runOnJS(true).onFinalize(Keyboard.dismiss)}>
-                <View
-                    style={[styles.flex1, modalWidth, styles.h100, !shouldUseNarrowLayout && styles.mh85vh]}
-                    testID={SearchRouter.displayName}
-                    ref={ref}
-                >
-                    {shouldUseNarrowLayout && (
-                        <HeaderWithBackButton
-                            title={translate('common.search')}
-                            onBackButtonPress={() => onRouterClose()}
-                            shouldDisplayHelpButton={false}
-                        />
-                    )}
-                    {isRecentSearchesDataLoaded && (
-                        <>
-                            <SearchInputSelectionWrapper
-                                value={textInputValue}
-                                isFullWidth={shouldUseNarrowLayout}
-                                onSearchQueryChange={onSearchQueryChange}
-                                onSubmit={() => {
-                                    const focusedOption = listRef.current?.getFocusedOption();
-
-                                    if (!focusedOption) {
-                                        submitSearch(textInputValue);
-                                        return;
-                                    }
-
-                                    onListItemPress(focusedOption);
-                                }}
-                                caretHidden={shouldHideInputCaret}
-                                autocompleteListRef={listRef}
-                                shouldShowOfflineMessage
-                                wrapperStyle={{...styles.border, ...styles.alignItemsCenter}}
-                                outerWrapperStyle={[shouldUseNarrowLayout ? styles.mv3 : styles.mv2, shouldUseNarrowLayout ? styles.mh5 : styles.mh2]}
-                                wrapperFocusedStyle={styles.borderColorFocus}
-                                isSearchingForReports={isSearchingForReports}
-                                selection={selection}
-                                substitutionMap={autocompleteSubstitutions}
-                                ref={textInputRef}
-                            />
-                            <SearchAutocompleteList
-                                autocompleteQueryValue={autocompleteQueryValue || textInputValue}
-                                handleSearch={searchInServer}
-                                searchQueryItem={searchQueryItem}
-                                getAdditionalSections={getAdditionalSections}
-                                onListItemPress={onListItemPress}
-                                setTextQuery={setTextAndUpdateSelection}
-                                updateAutocompleteSubstitutions={updateAutocompleteSubstitutions}
-                                onHighlightFirstItem={() => listRef.current?.updateAndScrollToFocusedIndex(1)}
-                                ref={listRef}
-                                textInputRef={textInputRef}
-                            />
-                        </>
-                    )}
-                </View>
-            </GestureDetector>
-        </GestureHandlerRootView>
+        <View
+            style={[styles.flex1, modalWidth, styles.h100, !shouldUseNarrowLayout && styles.mh85vh]}
+            testID={SearchRouter.displayName}
+            ref={ref}
+            onStartShouldSetResponder={() => true}
+            onResponderRelease={Keyboard.dismiss}
+        >
+            {shouldUseNarrowLayout && (
+                <HeaderWithBackButton
+                    title={translate('common.search')}
+                    onBackButtonPress={() => onRouterClose()}
+                    shouldDisplayHelpButton={false}
+                />
+            )}
+            {isRecentSearchesDataLoaded && (
+                <>
+                    <SearchInputSelectionWrapper
+                        value={textInputValue}
+                        isFullWidth={shouldUseNarrowLayout}
+                        onSearchQueryChange={onSearchQueryChange}
+                        onSubmit={() => {
+                            const focusedOption = listRef.current?.getFocusedOption();
+
+                            if (!focusedOption) {
+                                submitSearch(textInputValue);
+                                return;
+                            }
+
+                            onListItemPress(focusedOption);
+                        }}
+                        caretHidden={shouldHideInputCaret}
+                        autocompleteListRef={listRef}
+                        shouldShowOfflineMessage
+                        wrapperStyle={{...styles.border, ...styles.alignItemsCenter}}
+                        outerWrapperStyle={[shouldUseNarrowLayout ? styles.mv3 : styles.mv2, shouldUseNarrowLayout ? styles.mh5 : styles.mh2]}
+                        wrapperFocusedStyle={styles.borderColorFocus}
+                        isSearchingForReports={isSearchingForReports}
+                        selection={selection}
+                        substitutionMap={autocompleteSubstitutions}
+                        ref={textInputRef}
+                    />
+                    <SearchAutocompleteList
+                        autocompleteQueryValue={autocompleteQueryValue || textInputValue}
+                        handleSearch={searchInServer}
+                        searchQueryItem={searchQueryItem}
+                        getAdditionalSections={getAdditionalSections}
+                        onListItemPress={onListItemPress}
+                        setTextQuery={setTextAndUpdateSelection}
+                        updateAutocompleteSubstitutions={updateAutocompleteSubstitutions}
+                        onHighlightFirstItem={() => listRef.current?.updateAndScrollToFocusedIndex(1)}
+                        ref={listRef}
+                        textInputRef={textInputRef}
+                    />
+                </>
+            )}
+        </View>
     );
 }