authorgravatar for julius0216@outlook.comJulius Marminge <julius0216@outlook.com> 2026-02-19 15:52:11-08:00
committergravatar for julius0216@outlook.comJulius Marminge <julius0216@outlook.com> 2026-02-19 15:52:11-08:00
logc00354c0b11d97779ba387c046a2da367fd4c1d1
treeb909cedff0d8ed961413df144f3e8e0c26670c92
parenta002239fc40750ca04fe1c890cd5b9395cceb89b

Use non-passive wheel listener for turn strip

Co-authored-by: codex <codex@users.noreply.github.com>

1 files changed, 5 insertions(+), 11 deletions(-)

apps/web/src/components/DiffPanel.tsx+5-11
......@@ -3,14 +3,7 @@ import { FileDiff, type FileDiffMetadata, Virtualizer } from "@pierre/diffs/reac
33import { useQuery } from "@tanstack/react-query";
44import { useNavigate, useParams, useSearch } from "@tanstack/react-router";
55import { ChevronLeftIcon, ChevronRightIcon, Columns2Icon, Rows3Icon } from "lucide-react";
6import {
7 type WheelEvent as ReactWheelEvent,
8 useCallback,
9 useEffect,
10 useMemo,
11 useRef,
12 useState,
13} from "react";
6import { useCallback, useEffect, useMemo, useRef, useState } from "react";
147import { checkpointDiffQueryOptions } from "~/lib/providerReactQuery";
158import { cn } from "~/lib/utils";
169import { parseDiffRouteSearch, stripDiffSearchParams } from "../diffRouteSearch";
......@@ -250,7 +243,7 @@ export default function DiffPanel({ mode = "inline" }: DiffPanelProps) {
250243 if (!element) return;
251244 element.scrollBy({ left: offset, behavior: "smooth" });
252245 }, []);
253 const onTurnStripWheel = useCallback((event: ReactWheelEvent<HTMLDivElement>) => {
246 const onTurnStripWheel = useCallback((event: WheelEvent) => {
254247 const element = turnStripRef.current;
255248 if (!element) return;
256249 if (element.scrollWidth <= element.clientWidth + 1) return;
......@@ -267,15 +260,17 @@ export default function DiffPanel({ mode = "inline" }: DiffPanelProps) {
267260 updateTurnStripScrollState();
268261 const onScroll = () => updateTurnStripScrollState();
269262 element.addEventListener("scroll", onScroll, { passive: true });
263 element.addEventListener("wheel", onTurnStripWheel, { passive: false });
270264
271265 const resizeObserver = new ResizeObserver(() => updateTurnStripScrollState());
272266 resizeObserver.observe(element);
273267
274268 return () => {
275269 element.removeEventListener("scroll", onScroll);
270 element.removeEventListener("wheel", onTurnStripWheel);
276271 resizeObserver.disconnect();
277272 };
278 }, [updateTurnStripScrollState]);
273 }, [onTurnStripWheel, updateTurnStripScrollState]);
279274
280275 useEffect(() => {
281276 updateTurnStripScrollState();
......@@ -344,7 +339,6 @@ export default function DiffPanel({ mode = "inline" }: DiffPanelProps) {
344339 <div
345340 ref={turnStripRef}
346341 className="turn-chip-strip flex gap-1 overflow-x-auto px-8 py-0.5"
347 onWheel={onTurnStripWheel}
348342 >
349343 <button
350344 type="button"