diff --git a/apps/expo/app/(app)/(drawer)/(tabs)/search.tsx b/apps/expo/app/(app)/(drawer)/(tabs)/search.tsx index 6452cd567..91da41b4d 100644 --- a/apps/expo/app/(app)/(drawer)/(tabs)/search.tsx +++ b/apps/expo/app/(app)/(drawer)/(tabs)/search.tsx @@ -83,6 +83,7 @@ export default function Search() { onSelect={handleSearchSelect} placeholder="Search for a place" ref={ref} + shouldNavigateBackOnClear={Platform.OS !== 'web'} /> {/* Add search virtual list for feed, packs, trips, places with prop to determine which to display */} diff --git a/packages/app/components/PlacesAutocomplete/PlacesAutocomplete.tsx b/packages/app/components/PlacesAutocomplete/PlacesAutocomplete.tsx index 4a090b71b..ff92c5abb 100644 --- a/packages/app/components/PlacesAutocomplete/PlacesAutocomplete.tsx +++ b/packages/app/components/PlacesAutocomplete/PlacesAutocomplete.tsx @@ -8,10 +8,14 @@ import { usePlacesAutoComplete } from './usePlacesAutoComplete'; interface PlacesAutocompleteProps { onSelect?: (geoJSON: any) => void; placeholder?: string; + shouldNavigateBackOnClear?: any; } export const PlacesAutocomplete = forwardRef( - function PlacesAutoComplete({ onSelect, placeholder }, ref) { + function PlacesAutoComplete( + { onSelect, placeholder, shouldNavigateBackOnClear = false }, + ref, + ) { const { data, handleSelect, search, setSearch } = usePlacesAutoComplete(onSelect); const inputRef = useRef(null); @@ -35,6 +39,7 @@ export const PlacesAutocomplete = forwardRef( onChange={setSearch} searchString={search} ref={inputRef} + shouldNavigateBackOnClear={shouldNavigateBackOnClear} /> ); }, diff --git a/packages/app/components/SearchInput/SearchInput.tsx b/packages/app/components/SearchInput/SearchInput.tsx index c0b714c0c..b9d5f9068 100644 --- a/packages/app/components/SearchInput/SearchInput.tsx +++ b/packages/app/components/SearchInput/SearchInput.tsx @@ -7,6 +7,7 @@ import React, { useState, } from 'react'; import { Platform, type TextInput } from 'react-native'; +import { useNavigation } from '@react-navigation/native'; import { MaterialIcons, MaterialCommunityIcons } from '@expo/vector-icons'; import useSearchInput from './useSearchInput'; import useTheme from 'app/hooks/useTheme'; @@ -37,6 +38,7 @@ interface SearchInputProps { placeholder?: string; canCreateNewItem?: boolean; resultItemComponent: React.ReactElement; + shouldNavigateBackOnClear?: boolean; } export const SearchInput = forwardRef( @@ -50,11 +52,14 @@ export const SearchInput = forwardRef( onChange, searchString, canCreateNewItem = false, + shouldNavigateBackOnClear = false, }, inputRef, ) { const inputContainerRef = useRef(null); const [inputWidth, setInputWidth] = useState(undefined); + const [isFocused, setIsFocused] = useState(false); + const navigation = Platform.OS === 'web' ? null : useNavigation(); useLayoutEffect(() => { if (inputContainerRef.current) { @@ -74,6 +79,16 @@ export const SearchInput = forwardRef( const options = useSearchOptions(results, searchString, canCreateNewItem); const { isDark, currentTheme } = useTheme(); + const handleFocus = () => setIsFocused(true); + const handleBlur = () => setIsFocused(false); + + const handleClearSearchWithOptionalNavigation = () => { + handleClearSearch(); + if (shouldNavigateBackOnClear && navigation?.canGoBack()) { + navigation.goBack(); + } + }; + if (Platform.OS === 'web') { return ( @@ -93,8 +108,10 @@ export const SearchInput = forwardRef( placeholder={placeholder ?? 'Search'} value={searchString} onChange={(e) => handleSearchChange(e.target.value)} + onFocus={handleFocus} + onBlur={handleBlur} /> - {searchString && ( + {(searchString || isFocused) && ( ( lightTheme showCancel={true} selectTextOnFocus + onFocus={handleFocus} + onBlur={handleBlur} style={{ backgroundColor: 'transparent', borderRightWidth: 0, @@ -205,9 +224,9 @@ export const SearchInput = forwardRef( fontSize: 20, }} /> - {searchString && searchString.trim().length > 0 && ( + {(searchString || isFocused) && (