Stop map event propagation on city click

This commit is contained in:
2026-05-14 15:26:37 +03:00
parent 30f1ee7873
commit 4f5786ee30
2 changed files with 57 additions and 1 deletions
@@ -229,6 +229,7 @@ vi.mock("leaflet", () => {
// ---------------------------------------------------------------------------
import { MapCanvas } from "./MapCanvas.js";
import L from "leaflet";
// ---------------------------------------------------------------------------
// Helpers
@@ -311,6 +312,53 @@ describe("MapCanvas — legacy (flat) path", () => {
clickHandlers?.[0]?.({} as unknown);
expect(onMarkerClick).toHaveBeenCalledWith("MOW");
});
it("stops tooltip pre-click events so the first city-label click is not consumed by the map", () => {
const onMarkerClick = vi.fn();
renderCanvas(
[{ id: "MOW", lat: 1, lng: 2, style: "blue-small", label: "Москва", tooltipPermanent: true }],
{ onMarkerClick },
);
const marker = createdMarkers[0];
if (!marker) {
throw new Error("expected marker to be created");
}
const mousedownHandlers = marker.tooltipHandlers["mousedown"];
expect(mousedownHandlers?.length).toBeGreaterThan(0);
vi.mocked(L.DomEvent.stop).mockClear();
mousedownHandlers?.[0]?.({} as unknown);
expect(L.DomEvent.stop).toHaveBeenCalled();
expect(onMarkerClick).not.toHaveBeenCalled();
marker.tooltipHandlers["click"]?.[0]?.({} as unknown);
expect(onMarkerClick).toHaveBeenCalledWith("MOW");
});
it("stops marker click propagation before selecting the city", () => {
const onMarkerClick = vi.fn();
renderCanvas(
[{ id: "MOW", lat: 1, lng: 2, style: "blue-small", label: "Москва", tooltipPermanent: true }],
{ onMarkerClick },
);
const marker = createdMarkers[0];
if (!marker) {
throw new Error("expected marker to be created");
}
const markerClick = marker.on.mock.calls.find((call) => call[0] === "click")?.[1] as
| ((event: unknown) => void)
| undefined;
expect(markerClick).toBeDefined();
vi.mocked(L.DomEvent.stop).mockClear();
markerClick?.({});
expect(L.DomEvent.stop).toHaveBeenCalled();
expect(onMarkerClick).toHaveBeenCalledWith("MOW");
});
});
describe("MapCanvas — categorized: visibility predicate", () => {
@@ -407,13 +407,21 @@ export const MapCanvas: FC<MapCanvasProps> = ({
});
const tooltip = marker.getTooltip();
const stopTooltipEvent = (event: L.LeafletMouseEvent) => {
L.DomEvent.stop(event);
};
tooltip?.on("mousedown", stopTooltipEvent);
tooltip?.on("mouseup", stopTooltipEvent);
tooltip?.on("dblclick", stopTooltipEvent);
tooltip?.on("preclick", stopTooltipEvent);
tooltip?.on("click", (event: L.LeafletMouseEvent) => {
L.DomEvent.stop(event);
onMarkerClickRef.current?.(m.id);
});
}
marker.on("click", () => {
marker.on("click", (event: L.LeafletMouseEvent) => {
L.DomEvent.stop(event);
onMarkerClickRef.current?.(m.id);
});