Hacktoberfest 2026: die Issues, die Maintainer für den Oktober markiert haben – offen und einsteigerfreundlich. Hacktoberfest-Issues durchsuchen

[Bug]: Dragging a sidebar thread from the lower part of the list auto-scrolls the sidebar to the bottom

Offen Anfängerfreundlich
  • Stimmt etwas nicht?
#27,669 0 Kommentare 0 Reaktionen 0 zugewiesene Personen Auf GitHub ansehen

Maintainer antworten meist innerhalb von 1 Tag

Dieses Issue hat noch niemand übernommen.

Bewertung

Schwierigkeit
2/5
Geschätzter Aufwand
1-3 Stunden
Anfängerfreundlichkeit
78/100
Issue-Typ
Bug
Klarheit
Klar beschrieben
Aktivitätsstatus
Aktiv
Tech-Stack
react, typescript
Bereich
frontend

Rechercherichtung

Beginne in apps/web/src/components/Sidebar.tsx nahe der autoScroll-Prop bei Zeile 3169 und prüfe anschließend die Auto-Scroll-Einstellungen von dnd-kit 6.3.1 und reproduziere das gemeldete Ziehen in einer unteren Zeile. Passe die Auto-Scroll-Zone und -Geschwindigkeit so an, dass die Liste stillsteht, bis sich der Zeiger dem Rand der Seitenleiste nähert, während sie beim Ziehen am Rand weiterhin scrollt. Überprüfe die gemeldeten Gesten in der App, insbesondere das Ziehen eines angehefteten Threads aus den unteren sichtbaren Zeilen.

Vom Indexierungsmodell aus dem Issue-Text verfasst.

Beschreibung

Before submitting
  • I searched existing issues and did not find a duplicate. Closest: #27586 (a row jumps down the list on pickup, same build). It may be the same cause, but it doesn't mention the list scrolling, so I'm filing this separately. #26392 fixed a similar jump when settling a thread, through a different path (focus restore).
  • I included enough detail to reproduce or investigate the problem.
Area

apps/web

Steps to reproduce
  1. Have enough threads that the sidebar list is taller than the sidebar, and scroll it to the top.
  2. Press a thread in the lower part of the visible list. A pinned thread shows it best when Pinned fills most of the sidebar.
  3. Move the pointer a few pixels to start the drag. A small wobble downward is enough, even if you mean to drag up.
Expected behavior

The list stays put until the pointer reaches the edge of the sidebar, then scrolls at a speed you can control. You can move a pinned thread to the top of Pinned without losing sight of Pinned.

Actual behavior

As soon as the drag starts, the sidebar scrolls to the bottom of the list, even with the pointer held still. The pinned threads leave the screen, so you have to drag all the way back up.

Likely cause

The sidebar uses dnd-kit's default auto-scroll settings, which are too aggressive for a list this narrow and tall:

  • Sidebar.tsx:3169 passes autoScroll={!isContextDrag}, so dnd-kit 6.3.1's defaults apply.
  • The default zone is 20% of the scroller's height (getScrollDirectionAndSpeed). In an 800px sidebar that's the bottom 160px, about two thread rows, so a row can start inside it.
  • The default speed is up to 10px every 5ms at the edge, or 2,000px/s (useAutoScroller).
  • Scroll intent is sticky (useScrollIntent). One pixel of downward movement allows forward scrolling for the rest of the drag.
  • The scroll interval keeps running while the pointer is still, so the list runs to the end.
What I checked

Confirmed in the source, and with a simulation that runs the real dnd-kit 6.3.1 and an unmodified Sidebar.pointer.ts in jsdom with fake geometry (800px viewport, 82px rows, 3,280px list):

Gesture Pressed row Scrolled after holding 1.5s
8px down Top or middle of the viewport 0px
8px down In the bottom 20% 1,143px, still moving
8px up only In the bottom 20% 0px
8px up, then 1px down In the bottom 20% 816px, still moving

Not confirmed: I haven't reproduced this in a running app with this explanation, and the simulation has no real layout. I saw the jump in the app, but didn't measure where the pointer was. In the simulation, rows above the bottom 20% never scroll, so if this happens from the top of the list there is a second cause.

Ruled out by reading the code: the focus restore from #26392 now uses preventScroll, the drag labels and placeholders don't change layout height (h-0), and the sidebar's other scrollIntoView calls only run for keyboard navigation and route reveals.

Suggested fix

A smaller zone and a lower speed, keeping the current on/off behavior:

autoScroll={{ enabled: !isContextDrag, threshold: { x: 0, y: 0.05 }, acceleration: 3 }}

With these values in the same simulation, the row that ran away above stays at 0px, in both the 8px-down and 1px-wobble gestures. Dragging to the edge still scrolls, at about 500px/s. A row pressed in the last 5% still scrolls, at about 400px/s. The values need a real feel test.

Impact

Minor bug or occasional failure

Version or commit

T3 Code (Beta) 0.1.5 (6d450a428485). Source references are from main at 616c426f5f.

Environment

macOS 26.6.2, desktop app.

Workaround

Scroll the list so the row sits higher in the sidebar before picking it up. Based on the simulation, not tested in the app.

Investigated and drafted by Claude Code (Claude Opus 5.5).

Vorherrschende Sprache
TypeScript
Sterne
24.8k
Forks
6.4k
Ø Merge
3 Std. 20 Min.
Gemergte PRs (30 T.)
208

Entwicklungsumgebung

In Codespaces öffnen

Startet den Dev-Container des Projekts im Browser, mit Ihrem eigenen GitHub-Konto.

Erste Schritte

  1. Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
  2. Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
  3. Forken Sie das Repository und arbeiten Sie in einem Branch.
  4. Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.

Mehr aus pingdotgg/t3code

Alle Issues in pingdotgg/t3code

Ähnliche Issues

Weitere Issues zu TypeScript

Neue Issues direkt in Ihr Postfach

Eine kurze Übersicht über anfängerfreundliche GitHub-Issues.