Merge pull request #1400 from andrew-bierman/enhance-searchInput

Enhance search input
andrew-bierman · Jan 5, 2025 · 87e57e1 · 87e57e1
2 parents 19dbe50 + 2ae2356
commit 87e57e1
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 4 deletions.
diff --git 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'}
         />
       </SafeAreaView>
       {/* 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
@@ -8,10 +8,14 @@ import { usePlacesAutoComplete } from './usePlacesAutoComplete';
 interface PlacesAutocompleteProps {
   onSelect?: (geoJSON: any) => void;
   placeholder?: string;
+  shouldNavigateBackOnClear?: any;
 }
 
 export const PlacesAutocomplete = forwardRef<any, PlacesAutocompleteProps>(
-  function PlacesAutoComplete({ onSelect, placeholder }, ref) {
+  function PlacesAutoComplete(
+    { onSelect, placeholder, shouldNavigateBackOnClear = false },
+    ref,
+  ) {
     const { data, handleSelect, search, setSearch } =
       usePlacesAutoComplete(onSelect);
     const inputRef = useRef<TextInput>(null);
@@ -35,6 +39,7 @@ export const PlacesAutocomplete = forwardRef<any, PlacesAutocompleteProps>(
         onChange={setSearch}
         searchString={search}
         ref={inputRef}
+        shouldNavigateBackOnClear={shouldNavigateBackOnClear}
       />
     );
   },

diff --git 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<TextInput, SearchInputProps>(
@@ -50,11 +52,14 @@ export const SearchInput = forwardRef<TextInput, SearchInputProps>(
       onChange,
       searchString,
       canCreateNewItem = false,
+      shouldNavigateBackOnClear = false,
     },
     inputRef,
   ) {
     const inputContainerRef = useRef<HTMLDivElement | null>(null);
     const [inputWidth, setInputWidth] = useState<number | undefined>(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<TextInput, SearchInputProps>(
     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 (
         <Popover size="$20" allowFlip placement="bottom" open={isVisible}>
@@ -93,8 +108,10 @@ export const SearchInput = forwardRef<TextInput, SearchInputProps>(
                 placeholder={placeholder ?? 'Search'}
                 value={searchString}
                 onChange={(e) => handleSearchChange(e.target.value)}
+                onFocus={handleFocus}
+                onBlur={handleBlur}
               />
-              {searchString && (
+              {(searchString || isFocused) && (
                 <MaterialIcons
                   name="close"
                   style={{
@@ -192,6 +209,8 @@ export const SearchInput = forwardRef<TextInput, SearchInputProps>(
               lightTheme
               showCancel={true}
               selectTextOnFocus
+              onFocus={handleFocus}
+              onBlur={handleBlur}
               style={{
                 backgroundColor: 'transparent',
                 borderRightWidth: 0,
@@ -205,9 +224,9 @@ export const SearchInput = forwardRef<TextInput, SearchInputProps>(
                 fontSize: 20,
               }}
             />
-            {searchString && searchString.trim().length > 0 && (
+            {(searchString || isFocused) && (
               <RIconButton
-                onPress={handleClearSearch}
+                onPress={handleClearSearchWithOptionalNavigation}
                 style={{ backgroundColor: 'transparent' }}
               >
                 <MaterialIcons