diff --git a/frontend/src/hooks/useLocationMapViewControls.js b/frontend/src/hooks/useLocationMapViewControls.js index 47c9b08..7db0051 100644 --- a/frontend/src/hooks/useLocationMapViewControls.js +++ b/frontend/src/hooks/useLocationMapViewControls.js @@ -125,6 +125,7 @@ export default function useLocationMapViewControls({ Math.min(availableWidth / mapSize.width, availableHeight / mapSize.height) ); setZoom(Number(nextZoom.toFixed(2))); + scrollElement?.scrollTo({ left: 0, top: 0 }); }, [mapSize.height, mapSize.width, setZoom, svgRef]); return { diff --git a/frontend/tests/location-map-manager.spec.ts b/frontend/tests/location-map-manager.spec.ts index 2ce3da0..93680b0 100644 --- a/frontend/tests/location-map-manager.spec.ts +++ b/frontend/tests/location-map-manager.spec.ts @@ -3052,6 +3052,18 @@ test("mobile fit zoom fits the map into the visible canvas", async ({ page }) => }); await page.goto("/stores/100/locations/10/map"); + const scroll = page.locator(".location-map-scroll"); + await scroll.evaluate((element) => { + element.scrollLeft = 320; + element.scrollTop = 240; + }); + const pannedScroll = await scroll.evaluate((element) => ({ + left: element.scrollLeft, + top: element.scrollTop, + })); + expect(pannedScroll.left).toBeGreaterThan(0); + expect(pannedScroll.top).toBeGreaterThan(0); + await page.getByRole("button", { name: "Fit" }).click(); const zoomText = page.locator(".location-map-zoom-controls span"); @@ -3067,6 +3079,10 @@ test("mobile fit zoom fits the map into the visible canvas", async ({ page }) => if (!scrollBox || !svgBox) throw new Error("Mobile fitted map was not measurable"); expect(svgBox.width).toBeLessThanOrEqual(scrollBox.width + 1); expect(svgBox.height).toBeLessThanOrEqual(scrollBox.height + 1); + await expect.poll(async () => scroll.evaluate((element) => ({ + left: element.scrollLeft, + top: element.scrollTop, + }))).toEqual({ left: 0, top: 0 }); }); test("zoom controls disable at map zoom limits", async ({ page }) => {