SearchPanel and Button Bugs

frontend/calpoly-map/src/components/features/search/SearchPanel.tsx

@@ -29,6 +29,7 @@ interface Props {
   cameraMove: (coordinates: number[]) => void;
   cameraFitRoute: (start: number[], end: number[]) => void;
   bottomSheetPosition: SharedValue<number>;
+  routingSearchSheetChange: (change : boolean) => void;
   onNavigate: (feature: Feature<Geometry, GeoJsonProperties>) => void;
 }
 
@@ -55,12 +56,13 @@ type SearchRow =
       item: SavedPlace;
     };
 
-export function SearchPanel({ cameraMove, cameraFitRoute, bottomSheetPosition, onNavigate }: Props) {
+export function SearchPanel({ cameraMove, cameraFitRoute, bottomSheetPosition, routingSearchSheetChange, onNavigate }: Props) {
   // Bottom sheet controls
   const sheetRef = useRef<BottomSheet>(null);
   const routingSearchSheetRef = useRef<BottomSheet>(null);
   const routeStartInputRef = useRef<TextInput>(null);
   const routeEndInputRef = useRef<TextInput>(null);
+  const routingSearchInputRef = useRef<TextInput>(null);
 
   const routingSearchSnapPoints = useMemo(() => ["85%"], []);
 
@@ -105,7 +107,7 @@ export function SearchPanel({ cameraMove, cameraFitRoute, bottomSheetPosition, o
   } = useMapContext();
 
   const snapPoints = useMemo(
-    () => routingActive ? ["28%", "50%", "65%", "85%"] : ["14%", "35%", "55%", "75%"],
+    () => routingActive ? ["34%", "50%", "65%", "85%"] : ["14%", "35%", "55%", "75%"],
     [routingActive],
   );
 
@@ -151,25 +153,32 @@ export function SearchPanel({ cameraMove, cameraFitRoute, bottomSheetPosition, o
     [setSearchQuery],
   );
 
+  const blurRoutingInputs = useCallback(() => {
+    routeStartInputRef.current?.blur();
+    routeEndInputRef.current?.blur();
+    Keyboard.dismiss();
+  }, []);
+
   // Opens the routing search based on which field is selected
   const openRoutingSearchSheet = useCallback(
     (field: "start" | "end") => {
       setActiveField(field);
       setSearchQuery("");
       setFocused(true);
       setRoutingSearchSheetOpen(true);
+      blurRoutingInputs();
 
       requestAnimationFrame(() => {
         routingSearchSheetRef.current?.snapToIndex(0);
       });
     },
-    [setSearchQuery],
+    [blurRoutingInputs, setSearchQuery],
   );
 
-  const blurRoutingInputs = useCallback(() => {
-    routeStartInputRef.current?.blur();
-    routeEndInputRef.current?.blur();
-  }, []);
+  useEffect(() => {
+  routingSearchSheetChange?.(routingSearchSheetOpen);
+}, [routingSearchSheetOpen, routingSearchSheetChange]);
+
 
   const closeRoutingSearchSheet = useCallback(() => {
     setRoutingSearchSheetOpen(false);
@@ -807,6 +816,7 @@ export function SearchPanel({ cameraMove, cameraFitRoute, bottomSheetPosition, o
         </View>
 
         <BottomSheetTextInput
+          ref={routingSearchInputRef}
           style={styles.input}
           placeholder={
             activeField === "start"
@@ -818,7 +828,6 @@ export function SearchPanel({ cameraMove, cameraFitRoute, bottomSheetPosition, o
           autoCorrect={false}
           value={activeField === "start" ? startValue : endValue}
           onChangeText={handleRoutingSearchChange}
-          autoFocus={routingSearchSheetOpen}
           selectTextOnFocus={false}
         />
       </>
@@ -828,11 +837,24 @@ export function SearchPanel({ cameraMove, cameraFitRoute, bottomSheetPosition, o
       closeRoutingSearchSheet,
       endValue,
       handleRoutingSearchChange,
-      routingSearchSheetOpen,
       startValue,
     ],
   );
 
+  useEffect(() => {
+    if (!routingSearchSheetOpen) {
+      return;
+    }
+
+    const focusTimer = setTimeout(() => {
+      routingSearchInputRef.current?.focus();
+    }, 140);
+
+    return () => {
+      clearTimeout(focusTimer);
+    };
+  }, [activeField, routingSearchSheetOpen]);
+
   // Auto-fill start as "My location" when routing becomes active
   useEffect(() => {
     if (!routingActive || hasAutoFilledStart || !userLocation) return;

frontend/calpoly-map/src/components/map/MapContainer.tsx

@@ -223,6 +223,8 @@ export function MapContainer({
 
   const searchPanelHeight = useSharedValue<number>(0);
   const windowHeight = Dimensions.get("window").height;
+  const [routingSearchSheetOpen, setRoutingSearchSheetOpen] = useState(false);
+
 
   // Hide the recenter button when the bottom sheet extends past it
   const locationButtonStyle = useAnimatedStyle(() => {
@@ -598,13 +600,15 @@ export function MapContainer({
           cameraMove={handleCameraMove}
           cameraFitRoute={handleCameraFitRoute}
           bottomSheetPosition={searchPanelHeight}
+          routingSearchSheetChange={setRoutingSearchSheetOpen}
           onNavigate={handleNavigate}
         />
       )}
-
-      <Animated.View style={[styles.locationButtonContainer, locationButtonStyle]}>
-        <UserLocationButton />
-      </Animated.View>
+      {!routingSearchSheetOpen &&(
+        <Animated.View style={[styles.locationButtonContainer, locationButtonStyle]}>
+          <UserLocationButton />
+        </Animated.View>
+      )}
 
       <AmenityPopup
         visible={!!selectedAmenity}