diff --git a/app/screens/home/search/search.tsx b/app/screens/home/search/search.tsx index 3320a60f55..45c7d145d8 100644 --- a/app/screens/home/search/search.tsx +++ b/app/screens/home/search/search.tsx @@ -96,6 +96,7 @@ const SearchScreen = ({teamId, teams}: Props) => { const [filter, setFilter] = useState(FileFilters.ALL); const [showResults, setShowResults] = useState(false); const [containerHeight, setContainerHeight] = useState(0); + const [searchIsFocused, setSearchIsFocused] = useState(false); const [loading, setLoading] = useState(false); const [resultsLoading, setResultsLoading] = useState(false); @@ -150,8 +151,11 @@ const SearchScreen = ({teamId, teams}: Props) => { }, []); const handleModifierTextChange = useCallback((newValue: string) => { - searchRef.current?.focus?.(); - handleTextChange(newValue); + setSearchIsFocused(true); + requestAnimationFrame(() => { + searchRef.current?.focus?.(); + handleTextChange(newValue); + }); }, [handleTextChange]); const handleLoading = useCallback((show: boolean) => { @@ -184,6 +188,14 @@ const SearchScreen = ({teamId, teams}: Props) => { setShowResults(true); }, [handleClearSearch, handleLoading]); + const onBlur = useCallback(() => { + setSearchIsFocused(false); + }, []); + + const onFocus = useCallback(() => { + setSearchIsFocused(true); + }, []); + const onSubmit = useCallback(() => { handleSearch(searchTeamId, searchValue); }, [handleSearch, searchTeamId, searchValue]); @@ -272,21 +284,6 @@ const SearchScreen = ({teamId, teams}: Props) => { return headerHeight.value - AutocompletePaddingTop; }, [headerHeight]); - const autocomplete = useMemo(() => ( - - ), [cursorPosition, handleTextChange, searchValue, autocompleteMaxHeight, autocompletePosition, searchTeamId]); - // when clearing the input from the search results, scroll the initial view // back to the top so the header is in the collapsed state const onFlatLayout = useCallback(() => { @@ -326,8 +323,10 @@ const SearchScreen = ({teamId, teams}: Props) => { onSubmitEditing={onSubmit} blurOnSubmit={true} placeholder={intl.formatMessage({id: 'screen.search.placeholder', defaultMessage: 'Search messages & files'})} + onBlur={onBlur} onClear={handleClearSearch} onCancel={handleCancelSearch} + onFocus={onFocus} defaultValue={searchValue} ref={searchRef} /> @@ -385,7 +384,20 @@ const SearchScreen = ({teamId, teams}: Props) => { } - {autocomplete} + {searchIsFocused && + + } ); };