diff --git a/frontend/calpoly-map/src/components/features/search/SearchPanel.tsx b/frontend/calpoly-map/src/components/features/search/SearchPanel.tsx index 0022ad7..c20ec21 100644 --- a/frontend/calpoly-map/src/components/features/search/SearchPanel.tsx +++ b/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; + routingSearchSheetChange: (change : boolean) => void; onNavigate: (feature: Feature) => 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(null); const routingSearchSheetRef = useRef(null); const routeStartInputRef = useRef(null); const routeEndInputRef = useRef(null); + const routingSearchInputRef = useRef(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,6 +153,12 @@ 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") => { @@ -158,18 +166,19 @@ export function SearchPanel({ cameraMove, cameraFitRoute, bottomSheetPosition, o 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 @@ -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; diff --git a/frontend/calpoly-map/src/components/map/MapContainer.tsx b/frontend/calpoly-map/src/components/map/MapContainer.tsx index fa171c8..2ecf0d6 100644 --- a/frontend/calpoly-map/src/components/map/MapContainer.tsx +++ b/frontend/calpoly-map/src/components/map/MapContainer.tsx @@ -223,6 +223,8 @@ export function MapContainer({ const searchPanelHeight = useSharedValue(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} /> )} - - - - + {!routingSearchSheetOpen &&( + + + + )}