Stop map event propagation on city click
This commit is contained in:
@@ -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);
|
||||
});
|
||||
|
||||
|
||||
Reference in New Issue
Block a user