diff --git a/client/src/components/Planner/PlaceFormModal.tsx b/client/src/components/Planner/PlaceFormModal.tsx index 3515b7edb..c58ab21bd 100644 --- a/client/src/components/Planner/PlaceFormModal.tsx +++ b/client/src/components/Planner/PlaceFormModal.tsx @@ -79,6 +79,7 @@ function usePlaceFormModal(props: PlaceFormModalProps) { const [duplicateWarning, setDuplicateWarning] = useState(null) const [pendingFiles, setPendingFiles] = useState([]) const fileRef = useRef(null) + const searchInputRef = useRef(null) const [acSuggestions, setAcSuggestions] = useState<{ placeId: string; mainText: string; secondaryText: string }[]>([]) const [acHighlight, setAcHighlight] = useState(-1) const acDebounceRef = useRef | null>(null) @@ -131,6 +132,17 @@ function usePlaceFormModal(props: PlaceFormModalProps) { // eslint-disable-next-line react-hooks/exhaustive-deps }, [place, prefillCoords, isOpen, assignmentId]) + useEffect(() => { + if (isOpen) { + setTimeout(() => { + const modal = searchInputRef.current?.closest('[role="dialog"]') ?? document.body + if (!modal.contains(document.activeElement) || document.activeElement === document.body) { + searchInputRef.current?.focus() + } + }, 50) + } + }, [isOpen]) + // Derive location bias bounding box from the trip's existing places const places = useTripStore((s) => s.places) const locationBias = useMemo(() => { @@ -436,6 +448,7 @@ function usePlaceFormModal(props: PlaceFormModalProps) { canUploadFiles, places, locationBias, + searchInputRef, fetchSuggestions, handleChange, handleMapsSearch, @@ -497,6 +510,7 @@ export default function PlaceFormModal(props: PlaceFormModalProps) { canUploadFiles, places, locationBias, + searchInputRef, fetchSuggestions, handleChange, handleMapsSearch, @@ -548,6 +562,7 @@ export default function PlaceFormModal(props: PlaceFormModalProps) {
setMapsSearch(e.target.value)}