diff --git a/src/view/screens/Search/Search.tsx b/src/view/screens/Search/Search.tsx index 2111c24efd..246db6f479 100644 --- a/src/view/screens/Search/Search.tsx +++ b/src/view/screens/Search/Search.tsx @@ -494,7 +494,6 @@ export function SearchScreen( true, ) - const [inputIsFocused, setInputIsFocused] = React.useState(false) const [showAutocomplete, setShowAutocomplete] = React.useState(false) const [searchHistory, setSearchHistory] = React.useState([]) @@ -533,9 +532,9 @@ export function SearchScreen( const onPressCancelSearch = React.useCallback(() => { scrollToTopWeb() - if (inputIsFocused) { + if (showAutocomplete) { textInput.current?.blur() - setInputIsFocused(false) + setShowAutocomplete(false) setSearchText(queryParam) } else { // If we just `setParams` and set `q` to an empty string, the URL still displays `q=`, which isn't pretty. @@ -548,15 +547,11 @@ export function SearchScreen( navigation.setParams({q: ''}) } } - }, [inputIsFocused, navigation, queryParam]) + }, [showAutocomplete, navigation, queryParam]) const onChangeText = React.useCallback(async (text: string) => { scrollToTopWeb() setSearchText(text) - - if (text.length > 0) { - setShowAutocomplete(true) - } }, []) const updateSearchHistory = React.useCallback( @@ -591,7 +586,7 @@ export function SearchScreen( navigation.push('Search', {q: searchText}) } else { textInput.current?.blur() - setInputIsFocused(false) + setShowAutocomplete(false) navigation.setParams({q: searchText}) } }, [navigation, searchText, updateSearchHistory]) @@ -673,8 +668,7 @@ export function SearchScreen( value={searchText} style={[pal.text, styles.headerSearchInput]} keyboardAppearance={theme.colorScheme} - onFocus={() => setInputIsFocused(true)} - onBlur={() => setInputIsFocused(false)} + onFocus={() => setShowAutocomplete(true)} onChangeText={onChangeText} onSubmitEditing={onSubmit} autoFocus={false} @@ -685,7 +679,7 @@ export function SearchScreen( autoComplete="off" autoCapitalize="none" /> - {inputIsFocused ? ( + {showAutocomplete ? ( - {(queryParam || inputIsFocused) && ( + {(queryParam || showAutocomplete) && ( )} - ) : !queryParam && inputIsFocused ? ( + ) : !queryParam && showAutocomplete ? (