Fix (Waypoints): clear placeholder results on panel close (#365)

src/components/directions/waypoints/waypoint-item.tsx

@@ -37,8 +37,6 @@ export const Waypoint = ({ id, index }: WaypointProps) => {
   const doRemoveWaypoint = useDirectionsStore(
     (state) => state.doRemoveWaypoint
   );
-  const waypoint = waypoints[index];
-  const { userInput, geocodeResults } = waypoint!;
 
   const handleGeocodeResults = useCallback(
     (addresses: ActiveWaypoint[]) => {
@@ -60,6 +58,11 @@ export const Waypoint = ({ id, index }: WaypointProps) => {
     [updateTextInput, index, refetchDirections]
   );
 
+  const waypoint = waypoints.find((wp) => wp.id === id);
+  if (!waypoint) return null;
+
+  const { userInput, geocodeResults } = waypoint!;
+
   const style = {
     transform: CSS.Transform.toString(transform),
     transition,

src/components/route-planner.tsx

@@ -3,6 +3,7 @@ import { useQuery } from '@tanstack/react-query';
 import { format } from 'date-fns';
 import { DirectionsControl } from './directions/directions';
 import { IsochronesControl } from './isochrones/isochrones';
+import { useDirectionsStore } from '@/stores/directions-store';
 
 const TilesControl = lazy(() =>
   import('./tiles/tiles').then((module) => ({ default: module.TilesControl }))
@@ -52,6 +53,9 @@ export const RoutePlanner = () => {
   const loading = useCommonStore((state) => state.loading);
   const toggleDirections = useCommonStore((state) => state.toggleDirections);
 
+  const clearPlaceholderWaypoints = useDirectionsStore(
+    (state) => state.clearPlaceholderWaypoints
+  );
   const tabConfig = TAB_CONFIG[activeTab as keyof typeof TAB_CONFIG];
 
   const {
@@ -124,7 +128,10 @@ export const RoutePlanner = () => {
             <Button
               variant="ghost"
               size="icon"
-              onClick={toggleDirections}
+              onClick={() => {
+                clearPlaceholderWaypoints();
+                toggleDirections();
+              }}
               data-testid="close-directions-button"
             >
               <X className="size-4" />

src/stores/directions-store.ts

@@ -100,6 +100,7 @@ interface DirectionsActions {
   ) => void;
   setIsOptimized: (isOptimized: boolean) => void;
   setActiveRouteIndex: (index: number) => void;
+  clearPlaceholderWaypoints: () => void;
 }
 
 type DirectionsStore = DirectionsState & DirectionsActions;
@@ -353,6 +354,25 @@ export const useDirectionsStore = create<DirectionsStore>()(
           undefined,
           'setActiveRouteIndex'
         ),
+
+      clearPlaceholderWaypoints: () =>
+        set(
+          (state) => {
+            state.waypoints.forEach((wp, i) => {
+              const hasOnlyPlaceholders = wp.geocodeResults.every(
+                (r) => !r.title || r.title === ''
+              );
+              if (hasOnlyPlaceholders) {
+                if (state.waypoints[i]) {
+                  state.waypoints[i].geocodeResults = [];
+                  state.waypoints[i].userInput = '';
+                }
+              }
+            });
+          },
+          undefined,
+          'clearPlaceholderWaypoints'
+        ),
     })),
     { name: 'directions-store' }
   )