@@ -3,7 +3,6 @@ import {deepEqual} from 'fast-equals';
33import React , { forwardRef , useCallback , useEffect , useRef , useState } from 'react' ;
44import type { TextInputProps } from 'react-native' ;
55import { InteractionManager , Keyboard , View } from 'react-native' ;
6- import { Gesture , GestureDetector , GestureHandlerRootView } from 'react-native-gesture-handler' ;
76import type { ValueOf } from 'type-fest' ;
87import HeaderWithBackButton from '@components/HeaderWithBackButton' ;
98import * as Expensicons from '@components/Icon/Expensicons' ;
@@ -429,64 +428,62 @@ function SearchRouter({onRouterClose, shouldHideInputCaret, isSearchRouterDispla
429428 const isRecentSearchesDataLoaded = ! isLoadingOnyxValue ( recentSearchesMetadata ) ;
430429
431430 return (
432- < GestureHandlerRootView style = { { flex : 1 } } >
433- < GestureDetector gesture = { Gesture . Tap ( ) . runOnJS ( true ) . onFinalize ( Keyboard . dismiss ) } >
434- < View
435- style = { [ styles . flex1 , modalWidth , styles . h100 , ! shouldUseNarrowLayout && styles . mh85vh ] }
436- testID = { SearchRouter . displayName }
437- ref = { ref }
438- >
439- { shouldUseNarrowLayout && (
440- < HeaderWithBackButton
441- title = { translate ( 'common.search' ) }
442- onBackButtonPress = { ( ) => onRouterClose ( ) }
443- shouldDisplayHelpButton = { false }
444- />
445- ) }
446- { isRecentSearchesDataLoaded && (
447- < >
448- < SearchInputSelectionWrapper
449- value = { textInputValue }
450- isFullWidth = { shouldUseNarrowLayout }
451- onSearchQueryChange = { onSearchQueryChange }
452- onSubmit = { ( ) => {
453- const focusedOption = listRef . current ?. getFocusedOption ( ) ;
454-
455- if ( ! focusedOption ) {
456- submitSearch ( textInputValue ) ;
457- return ;
458- }
459-
460- onListItemPress ( focusedOption ) ;
461- } }
462- caretHidden = { shouldHideInputCaret }
463- autocompleteListRef = { listRef }
464- shouldShowOfflineMessage
465- wrapperStyle = { { ...styles . border , ...styles . alignItemsCenter } }
466- outerWrapperStyle = { [ shouldUseNarrowLayout ? styles . mv3 : styles . mv2 , shouldUseNarrowLayout ? styles . mh5 : styles . mh2 ] }
467- wrapperFocusedStyle = { styles . borderColorFocus }
468- isSearchingForReports = { isSearchingForReports }
469- selection = { selection }
470- substitutionMap = { autocompleteSubstitutions }
471- ref = { textInputRef }
472- />
473- < SearchAutocompleteList
474- autocompleteQueryValue = { autocompleteQueryValue || textInputValue }
475- handleSearch = { searchInServer }
476- searchQueryItem = { searchQueryItem }
477- getAdditionalSections = { getAdditionalSections }
478- onListItemPress = { onListItemPress }
479- setTextQuery = { setTextAndUpdateSelection }
480- updateAutocompleteSubstitutions = { updateAutocompleteSubstitutions }
481- onHighlightFirstItem = { ( ) => listRef . current ?. updateAndScrollToFocusedIndex ( 1 ) }
482- ref = { listRef }
483- textInputRef = { textInputRef }
484- />
485- </ >
486- ) }
487- </ View >
488- </ GestureDetector >
489- </ GestureHandlerRootView >
431+ < View
432+ style = { [ styles . flex1 , modalWidth , styles . h100 , ! shouldUseNarrowLayout && styles . mh85vh ] }
433+ testID = { SearchRouter . displayName }
434+ ref = { ref }
435+ onStartShouldSetResponder = { ( ) => true }
436+ onResponderRelease = { Keyboard . dismiss }
437+ >
438+ { shouldUseNarrowLayout && (
439+ < HeaderWithBackButton
440+ title = { translate ( 'common.search' ) }
441+ onBackButtonPress = { ( ) => onRouterClose ( ) }
442+ shouldDisplayHelpButton = { false }
443+ />
444+ ) }
445+ { isRecentSearchesDataLoaded && (
446+ < >
447+ < SearchInputSelectionWrapper
448+ value = { textInputValue }
449+ isFullWidth = { shouldUseNarrowLayout }
450+ onSearchQueryChange = { onSearchQueryChange }
451+ onSubmit = { ( ) => {
452+ const focusedOption = listRef . current ?. getFocusedOption ( ) ;
453+
454+ if ( ! focusedOption ) {
455+ submitSearch ( textInputValue ) ;
456+ return ;
457+ }
458+
459+ onListItemPress ( focusedOption ) ;
460+ } }
461+ caretHidden = { shouldHideInputCaret }
462+ autocompleteListRef = { listRef }
463+ shouldShowOfflineMessage
464+ wrapperStyle = { { ...styles . border , ...styles . alignItemsCenter } }
465+ outerWrapperStyle = { [ shouldUseNarrowLayout ? styles . mv3 : styles . mv2 , shouldUseNarrowLayout ? styles . mh5 : styles . mh2 ] }
466+ wrapperFocusedStyle = { styles . borderColorFocus }
467+ isSearchingForReports = { isSearchingForReports }
468+ selection = { selection }
469+ substitutionMap = { autocompleteSubstitutions }
470+ ref = { textInputRef }
471+ />
472+ < SearchAutocompleteList
473+ autocompleteQueryValue = { autocompleteQueryValue || textInputValue }
474+ handleSearch = { searchInServer }
475+ searchQueryItem = { searchQueryItem }
476+ getAdditionalSections = { getAdditionalSections }
477+ onListItemPress = { onListItemPress }
478+ setTextQuery = { setTextAndUpdateSelection }
479+ updateAutocompleteSubstitutions = { updateAutocompleteSubstitutions }
480+ onHighlightFirstItem = { ( ) => listRef . current ?. updateAndScrollToFocusedIndex ( 1 ) }
481+ ref = { listRef }
482+ textInputRef = { textInputRef }
483+ />
484+ </ >
485+ ) }
486+ </ View >
490487 ) ;
491488}
492489
0 commit comments