From 16568ffa4598bd7bb90d49b07285558dbe9193a0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ullrich=20Sch=C3=A4fer?= <hi+github@ullrich.is>
Date: Fri, 3 Apr 2026 10:37:43 +0100
Subject: [PATCH] Fix no-go button click creating a waypoint
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The button was rendered as a React component, not a Leaflet control,
so clicks propagated to the map. Use L.DomEvent.disableClickPropagation
on the container — same approach Leaflet's built-in controls use.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 apps/planner/app/components/PlannerMap.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/apps/planner/app/components/PlannerMap.tsx b/apps/planner/app/components/PlannerMap.tsx
index d8d3499..0ec1aef 100644
--- a/apps/planner/app/components/PlannerMap.tsx
+++ b/apps/planner/app/components/PlannerMap.tsx
@@ -170,8 +170,15 @@ function CursorTracker({ awareness }: { awareness: YjsState["awareness"] }) {
 }
 
 function NoGoAreaButton({ active, onClick }: { active: boolean; onClick: () => void }) {
+  const ref = useRef<HTMLDivElement>(null);
+
+  // Prevent clicks from reaching the Leaflet map (same as built-in controls)
+  useEffect(() => {
+    if (ref.current) L.DomEvent.disableClickPropagation(ref.current);
+  }, []);
+
   return (
-    <div className="leaflet-top leaflet-left" style={{ marginTop: 80 }}>
+    <div ref={ref} className="leaflet-top leaflet-left" style={{ marginTop: 80 }}>
       <div className="leaflet-control leaflet-bar">
         <a
           href="#"