diff --git a/src/view/screens/Search/Search.tsx b/src/view/screens/Search/Search.tsx index b487a555a0..5893dfc00c 100644 --- a/src/view/screens/Search/Search.tsx +++ b/src/view/screens/Search/Search.tsx @@ -67,6 +67,7 @@ import * as TextField from '#/components/forms/TextField' import {ChevronBottom_Stroke2_Corner0_Rounded as ChevronDown} from '#/components/icons/Chevron' import {MagnifyingGlass2_Stroke2_Corner0_Rounded as MagnifyingGlass} from '#/components/icons/MagnifyingGlass2' import {Menu_Stroke2_Corner0_Rounded as Menu} from '#/components/icons/Menu' +import {SettingsGear2_Stroke2_Corner0_Rounded as Gear} from '#/components/icons/SettingsGear2' import {TimesLarge_Stroke2_Corner0_Rounded as X} from '#/components/icons/Times' const HEADER_HEIGHT = 56 @@ -415,15 +416,20 @@ function SearchLanguageDropdown({ function useQueryManager({initialQuery}: {initialQuery: string}) { const {contentLanguages} = useLanguagePrefs() - const {query, params: initialParams} = React.useMemo( - () => parseSearchQuery(initialQuery || ''), - [initialQuery], - ) + const {query, params: initialParams} = React.useMemo(() => { + return parseSearchQuery(initialQuery || '') + }, [initialQuery]) + const prevInitialQuery = React.useRef(initialQuery) const [lang, setLang] = React.useState( initialParams.lang || contentLanguages[0], ) + if (initialQuery !== prevInitialQuery.current) { + prevInitialQuery.current = initialQuery + setLang(initialParams.lang || contentLanguages[0]) + } + const params = React.useMemo( () => ({ // default stuff @@ -609,6 +615,13 @@ export function SearchScreen( AppBskyActorDefs.ProfileViewBasic[] >([]) + const {params, query, queryWithParams} = useQueryManager({ + initialQuery: queryParam, + }) + const showFiltersButton = Boolean(query && !showAutocomplete) + const [showFilters, setShowFilters] = React.useState(false) + const headerHeight = HEADER_HEIGHT + (showFilters ? 40 : 0) + useFocusEffect( useNonReactiveCallback(() => { if (isWeb) { @@ -765,6 +778,7 @@ export function SearchScreen( setSearchText('') navigation.setParams({q: ''}) } + setShowFilters(false) }, [navigation]) useFocusEffect( @@ -804,11 +818,18 @@ export function SearchScreen( [selectedProfiles], ) - const {params, query, queryWithParams} = useQueryManager({ - initialQuery: queryParam, - }) - const showFilters = Boolean(query && !showAutocomplete) - const headerHeight = HEADER_HEIGHT + (showFilters ? 40 : 0) + const onSearchInputFocus = React.useCallback(() => { + if (isWeb) { + // Prevent a jump on iPad by ensuring that + // the initial focused render has no result list. + requestAnimationFrame(() => { + setShowAutocomplete(true) + }) + } else { + setShowAutocomplete(true) + } + setShowFilters(false) + }, [setShowAutocomplete]) return ( @@ -845,11 +866,30 @@ export function SearchScreen( textInput={textInput} searchText={searchText} showAutocomplete={showAutocomplete} - setShowAutocomplete={setShowAutocomplete} + onFocus={onSearchInputFocus} onChangeText={onChangeText} onSubmit={onSubmit} onPressClearQuery={onPressClearQuery} /> + {showFiltersButton && ( + + )} {showAutocomplete && (