frontend/src/components/maps/LocationMapCanvas.jsx

@@ -14,6 +14,17 @@ function clampScrollPosition(value, maxValue) {
   return Math.min(Math.max(0, value), Math.max(0, maxValue));
 }
 
+function getSelectedObjectScrollKey(object, selectedObjectKey, zoom) {
+  return [
+    selectedObjectKey,
+    zoom.toFixed(2),
+    object.x,
+    object.y,
+    object.width,
+    object.height,
+  ].join(":");
+}
+
 export default function LocationMapCanvas({
   mode,
   objects,
@@ -58,7 +69,7 @@ export default function LocationMapCanvas({
   const panDragRef = useRef(null);
   const objectDragHistoryCapturedRef = useRef(false);
   const suppressPanClickRef = useRef(false);
-  const autoScrolledObjectKeyRef = useRef(null);
+  const autoScrolledObjectViewRef = useRef(null);
   const [isPanning, setIsPanning] = useState(false);
   const orderedObjects = useMemo(() => {
     if (!selectedObjectKey) return objects;
@@ -96,11 +107,11 @@ export default function LocationMapCanvas({
 
   useEffect(() => {
     if (!selectedObjectKey) {
-      autoScrolledObjectKeyRef.current = null;
+      autoScrolledObjectViewRef.current = null;
       return undefined;
     }
 
-    if (mode !== "edit" || dragState || autoScrolledObjectKeyRef.current === selectedObjectKey) {
+    if (mode !== "edit" || dragState) {
       return undefined;
     }
 
@@ -109,7 +120,12 @@ export default function LocationMapCanvas({
       return undefined;
     }
 
-    autoScrolledObjectKeyRef.current = selectedObjectKey;
+    const scrollKey = getSelectedObjectScrollKey(selectedObject, selectedObjectKey, zoom);
+    if (autoScrolledObjectViewRef.current === scrollKey) {
+      return undefined;
+    }
+    autoScrolledObjectViewRef.current = scrollKey;
+
     const frameId = window.requestAnimationFrame(() => {
       const scrollElement = scrollRef.current;
       if (!scrollElement) return;

frontend/tests/location-map-manager.spec.ts

@@ -211,6 +211,23 @@ async function readMapZoomPercent(page: Page) {
   return Number(value?.replace("%", "") || 0);
 }
 
+async function expectResizeHandleWithinMapScroll(page: Page) {
+  const scroll = page.locator(".location-map-scroll");
+  const resizeHandle = page.locator(".location-map-resize-handle");
+  await expect(resizeHandle).toBeVisible();
+  const scrollBox = await scroll.boundingBox();
+  const handleBox = await resizeHandle.boundingBox();
+  expect(scrollBox).not.toBeNull();
+  expect(handleBox).not.toBeNull();
+  if (!scrollBox || !handleBox) {
+    throw new Error("Selected resize handle was not measurable");
+  }
+  expect(handleBox.x).toBeGreaterThanOrEqual(scrollBox.x);
+  expect(handleBox.y).toBeGreaterThanOrEqual(scrollBox.y);
+  expect(handleBox.x + handleBox.width).toBeLessThanOrEqual(scrollBox.x + scrollBox.width + 1);
+  expect(handleBox.y + handleBox.height).toBeLessThanOrEqual(scrollBox.y + scrollBox.height + 1);
+}
+
 test("admin creates a map from zones, saves a draft, and publishes it", async ({ page }) => {
   await mockMapShell(page);
 
@@ -4253,20 +4270,65 @@ test("mobile edit selection keeps resize handle in reach", async ({ page }) => {
   await expect(bakeryArea).toHaveAttribute("aria-pressed", "true");
   await expect.poll(async () => scroll.evaluate((element) => element.scrollLeft)).toBeGreaterThan(200);
   await expect.poll(async () => scroll.evaluate((element) => element.scrollTop)).toBeGreaterThan(80);
+  await expectResizeHandleWithinMapScroll(page);
+});
 
-  const resizeHandle = page.locator(".location-map-resize-handle");
+test("mobile edit zoom keeps selected resize handle in reach", async ({ page }) => {
-  await expect(resizeHandle).toBeVisible();
+  await page.setViewportSize({ width: 390, height: 844 });
-  const scrollBox = await scroll.boundingBox();
+  await mockMapShell(page);
-  const handleBox = await resizeHandle.boundingBox();
+
-  expect(scrollBox).not.toBeNull();
+  const mapState = draftMapState([
-  expect(handleBox).not.toBeNull();
+    {
-  if (!scrollBox || !handleBox) {
+      id: 1608,
-    throw new Error("Selected resize handle was not measurable");
+      location_map_id: 900,
-  }
+      zone_id: 501,
-  expect(handleBox.x).toBeGreaterThanOrEqual(scrollBox.x);
+      zone_name: "Bakery",
-  expect(handleBox.y).toBeGreaterThanOrEqual(scrollBox.y);
+      type: "zone",
-  expect(handleBox.x + handleBox.width).toBeLessThanOrEqual(scrollBox.x + scrollBox.width + 1);
+      label: "Bakery",
-  expect(handleBox.y + handleBox.height).toBeLessThanOrEqual(scrollBox.y + scrollBox.height + 1);
+      x: 720,
+      y: 480,
+      width: 240,
+      height: 160,
+      rotation: 0,
+      locked: false,
+      visible: true,
+      sort_order: 1,
+    },
+  ], true);
+
+  await page.route("**/households/1/locations/10/map", async (route) => {
+    await route.fulfill({
+      status: 200,
+      contentType: "application/json",
+      body: JSON.stringify(mapState),
+    });
+  });
+
+  await page.goto("/stores/100/locations/10/map");
+  await page.getByRole("button", { name: "Continue Editing" }).click();
+
+  const scroll = page.locator(".location-map-scroll");
+  const bakeryArea = page.getByRole("button", { name: "Map area Bakery" });
+  await bakeryArea.focus();
+  await page.keyboard.press("Enter");
+  await expect(bakeryArea).toHaveAttribute("aria-pressed", "true");
+  await expectResizeHandleWithinMapScroll(page);
+
+  await scroll.evaluate((element) => {
+    element.scrollLeft = 0;
+    element.scrollTop = 0;
+  });
+  await expect.poll(async () => scroll.evaluate((element) => element.scrollLeft)).toBe(0);
+  await expect.poll(async () => scroll.evaluate((element) => element.scrollTop)).toBe(0);
+
+  const zoomIn = page.getByRole("button", { name: "Zoom in" });
+  await zoomIn.click();
+  await zoomIn.click();
+  await zoomIn.click();
+
+  await expect.poll(async () => scroll.evaluate((element) => element.scrollLeft)).toBeGreaterThan(200);
+  await expect.poll(async () => scroll.evaluate((element) => element.scrollTop)).toBeGreaterThan(80);
+  await expectResizeHandleWithinMapScroll(page);
 });
 
 test("mobile editor pans from empty map space without moving areas", async ({ page }) => {