fix: attach wheel handler with { passive: false } to enable preventDefault

React 17+ registers onWheel handlers as passive by default, making event.preventDefault() a no-op. This caused vertical-to-horizontal scroll conversion on the turn chip strip to fail silently. Replaced the React onWheel JSX prop with a useEffect that attaches the handler via addEventListener('wheel', handler, { passive: false }) on the ref element directly.

Cursor Agent committed 8 months ago

Commit 9bf6ec71 parent f3b773f1 file · +7 −13Browse files

Unified · Split

apps/web/src/components/DiffPanel.tsx+7−13

 import { useQuery } from "@tanstack/react-query";
 import { useParams } from "@tanstack/react-router";
 import { ChevronLeftIcon, ChevronRightIcon, Columns2Icon, Rows3Icon } from "lucide-react";
-import {
+import { type ReactNode, useCallback, useEffect, useMemo, useRef, useState } from "react";
-  type ReactNode,
-  type WheelEvent as ReactWheelEvent,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react";
 import { checkpointDiffQueryOptions } from "~/lib/providerReactQuery";
 import { cn } from "~/lib/utils";
 import { isElectron } from "../env";
 export function DiffWorkerPoolProvider({ children }: { children?: ReactNode }) {
   const workerPoolSize = useMemo(() => {
-    const cores = typeof navigator === "undefined" ? 4 : Math.max(1, navigator.hardwareConcurrency || 4);
+    const cores =
+      typeof navigator === "undefined" ? 4 : Math.max(1, navigator.hardwareConcurrency || 4);
     return Math.max(2, Math.min(6, Math.floor(cores / 2)));
   }, []);
     if (!element) return;
     element.scrollBy({ left: offset, behavior: "smooth" });
   }, []);
-  const onTurnStripWheel = useCallback((event: ReactWheelEvent<HTMLDivElement>) => {
+  const onTurnStripWheel = useCallback((event: WheelEvent) => {
     const element = turnStripRef.current;
     if (!element) return;
     if (element.scrollWidth <= element.clientWidth + 1) return;
     updateTurnStripScrollState();
     const onScroll = () => updateTurnStripScrollState();
     element.addEventListener("scroll", onScroll, { passive: true });
+    element.addEventListener("wheel", onTurnStripWheel, { passive: false });
     const resizeObserver = new ResizeObserver(() => updateTurnStripScrollState());
     resizeObserver.observe(element);
     return () => {
       element.removeEventListener("scroll", onScroll);
+      element.removeEventListener("wheel", onTurnStripWheel);
       resizeObserver.disconnect();
     };
-  }, [updateTurnStripScrollState]);
+  }, [updateTurnStripScrollState, onTurnStripWheel]);
   useEffect(() => {
     updateTurnStripScrollState();
           <div
             ref={turnStripRef}
             className="turn-chip-strip flex gap-1 overflow-x-auto px-8 py-0.5"
-            onWheel={onTurnStripWheel}
           >
             <button
               type="button"