fix focused pane scrolling

apps/nextjs/src/components/board/advanced-focus/wheel.ts

@@ -1,9 +1,11 @@
-const canScrollVertically = (element: HTMLElement, delta: number) => {
+const isVerticalScrollContainer = (element: HTMLElement) => {
   if (element.scrollHeight <= element.clientHeight) return false;
 
   const overflowY = getComputedStyle(element).overflowY;
-  if (overflowY !== "auto" && overflowY !== "scroll") return false;
+  return overflowY === "auto" || overflowY === "scroll";
+};
 
+const canScrollVertically = (element: HTMLElement, delta: number) => {
   return delta < 0 ? element.scrollTop > 0 : element.scrollTop + element.clientHeight < element.scrollHeight;
 };
 
@@ -11,17 +13,21 @@ export const redirectShiftWheel = (root: HTMLElement, target: EventTarget | null
   if (delta === 0) return false;
 
   let current = target instanceof HTMLElement ? target : null;
+  let startedInScrollContainer = false;
   while (current && root.contains(current)) {
-    if (canScrollVertically(current, delta)) {
+    const isCurrentScrollContainer = isVerticalScrollContainer(current);
+    startedInScrollContainer ||= isCurrentScrollContainer;
+    if (isCurrentScrollContainer && canScrollVertically(current, delta)) {
       current.scrollTop += delta;
       return true;
     }
     if (current === root) break;
     current = current.parentElement;
   }
+  if (startedInScrollContainer) return false;
 
   const viewport = [...root.querySelectorAll<HTMLElement>("[data-scrollbars='y'], [data-scrollbars='xy']")].find(
-    (element) => canScrollVertically(element, delta),
+    (element) => isVerticalScrollContainer(element) && canScrollVertically(element, delta),
   );
   if (!viewport) return false;
 

e2e/board-advanced-interactions.spec.ts

@@ -122,8 +122,12 @@ describe("Board advanced interactions", () => {
         probe.innerHTML = '<div style="height:600px"></div>';
         probe.addEventListener("wheel", (event) => event.stopPropagation());
         element.append(probe);
+
+        const unrelated = probe.cloneNode(true) as HTMLDivElement;
+        unrelated.dataset.shiftScrollProbe = "unrelated";
+        element.append(unrelated);
       });
-      const scrollProbe = advancedSurface.locator("[data-shift-scroll-probe]");
+      const scrollProbe = advancedSurface.locator("[data-shift-scroll-probe='true']");
       await page.keyboard.down("Shift");
       const pixelEventCancelled = await scrollProbe.evaluate(
         (element) =>
@@ -144,6 +148,15 @@ describe("Board advanced interactions", () => {
       await page.keyboard.up("Shift");
       expect(lineEventCancelled).toBe(true);
       expect(await scrollProbe.evaluate((element) => element.scrollTop)).toBeGreaterThanOrEqual(48);
+      await scrollProbe.evaluate((element) => {
+        element.scrollTop = element.scrollHeight;
+        element.dispatchEvent(
+          new WheelEvent("wheel", { bubbles: true, cancelable: true, shiftKey: true, deltaX: 120 }),
+        );
+      });
+      expect(
+        await advancedSurface.locator("[data-shift-scroll-probe='unrelated']").evaluate((element) => element.scrollTop),
+      ).toBe(0);
       await page.keyboard.press("Escape");
       await expect(advancedSurface).toBeHidden();
       await expect(widget).toBeFocused();