Virtualized list wrapper keeps stale height after data changes
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
- 55/100
- Issue-Typ
- Bug
- Klarheit
- Größtenteils klar
- Aktivitätsstatus
- Ruhig
- Tech-Stack
- react, typescript
- Bereich
- frontend, performance
Rechercherichtung
Beginne damit, die List-Komponente zu finden, die useWindowVirtualizer verwendet, und prüfe, wie rows.length und getTotalSize() in das Wrapper-Style einfließen. Vergleiche das Verhalten mit Commit da4a20196356fd7d96e0fb9b69be9bd662294eeb und reproduziere eine Änderung an Filter oder Pagination. Als erledigt gilt die Aufgabe, wenn die Wrapper-Höhe und die Bildlaufleiste die aktualisierte Zeilenanzahl ohne übermäßigen Leerraum widerspiegeln.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Beschreibung
Describe the bug
Summary
List uses useWindowVirtualizer for row virtualization, but the outer div’s inline
height is read directly from rowVirtualizer.getTotalSize() during render. Because the
virtualizer instance is stable and the getter mutates internal state without changing referential
identity, React never receives a new height value when the rows array is filtered or otherwise
resized. The wrapper therefore preserves an outdated, overly tall height, leaving a large blank
spacer below the visible rows and causing scroll position jumps.
Impact
Any operation that changes the number of rows (search, filters, pagination reset) leaves the
list container at its previous height. Users see excessive empty space and the scroll bar no
longer reflects the actual result size.
Root Cause
getTotalSize() is invoked inline inside JSX. The virtualizer recomputes its measurement cache,
but React doesn’t detect that the returned string (e.g., "32000px") should change because the
component never re-renders with a different computed value tied to the rows count.
Fix in my case
Memoize the total height using useMemo(() => rowVirtualizer.getTotalSize(), [rowVirtualizer, rows.length]) and pass that memoized number to the style prop. This forces a fresh height
string whenever the virtualizer’s count changes, keeping the spacer in sync. Implemented in commit
Your minimal, reproducible example
https://github.com/kosovatools/kosovatools.org/commit/da4a20196356fd7d96e0fb9b69be9bd662294eeb
Steps to reproduce
.
Expected behavior
Height react to count change
How often does this bug happen?
Every time
Screenshots or Videos
No response
Platform
Firefox
tanstack-virtual version
3.13.12
TypeScript version
5.7.3
Additional context
No response
Terms & Code of Conduct
- I agree to follow this project's Code of Conduct
- I understand that if my bug cannot be reliable reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.
- Vorherrschende Sprache
- TypeScript
- Sterne
- 7.1k
- Forks
- 472
- Ø Merge
- 1 T. 2 Std.
- Gemergte PRs (30 T.)
- 12
Entwicklungsumgebung
- Kein Dockerfile und keine Docker-Compose-Datei
- Hat eine Pull-Request-Vorlage
- Beitragsleitfaden lesen
Erste Schritte
- Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
- Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
- Forken Sie das Repository und arbeiten Sie in einem Branch.
- Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.
Mehr aus TanStack/virtual
-
measureElement caches 0 size for nodes that aren't attached yet (Vue: rows stack at start 0 and the list scrolls away on mount)Evtl. vergeben @webn00b hat das vor 10 Tagen übernommen. Offen
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 78/100
Maintainer antworten meist innerhalb von 1 Tag
-
`scrollToIndex(last, { align: 'end' })` stays short of the end after a measured row grows (virtual-core ≥ 3.17.0)Evtl. vergeben @minwookshin hat das vor 7 Tagen übernommen. Offen
Schwierigkeit 4/5 3-5 Tage Anfängerfreundlichkeit 55/100
TanStack/virtual#1290 · 1 Kommentar ·
Maintainer antworten meist innerhalb von 1 Tag
-
virtual-core: desktop Safari drops the prepend anchor write when history lands during the top rubber-band bounceEvtl. vergeben Ein verknüpfter Pull Request ist offen oder bereits gemergt. Offen
Schwierigkeit 5/5 Über eine Woche Anfängerfreundlichkeit 38/100
Maintainer antworten meist innerhalb von 1 Tag
-
Schwierigkeit 4/5 3-5 Tage Anfängerfreundlichkeit 62/100
Maintainer antworten meist innerhalb von 1 Tag
-
marko-virtual: scrollToEnd during an in-flight prepend strands the view one prepend above the bottom (chat-pretext e2e fails on CI)Evtl. wieder frei Ein Pull Request dazu wurde ohne Merge geschlossen. Offen
Schwierigkeit 4/5 3-5 Tage Anfängerfreundlichkeit 55/100
Maintainer antworten meist innerhalb von 1 Tag
Alle Issues in TanStack/virtual
Ähnliche Issues
-
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 85/100
Comfy-Org/ComfyUI_frontend#20346 ·
Maintainer antworten meist innerhalb von 1 Tag
-
Schwierigkeit 1/5 Unter einer Stunde Anfängerfreundlichkeit 90/100
decentralized-identity/didwebvh-ts#203 ·
Maintainer antworten meist innerhalb von 1 Tag
-
community first-timers-only good first issue hacktoberfest help wanted low hanging fruit up-for-grabs
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 65/100
lingdojo/kana-dojo#31791 · 1 Kommentar · 5 Reaktionen ·
Maintainer antworten meist innerhalb von 1 Tag
-
Telegram webhook: line breaks lost since switch to rich messagesEvtl. vergeben @Kshot3000 hat das heute übernommen. Offen
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 82/100
Maintainer antworten meist innerhalb von 1 Tag
-
github_actions security
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 75/100
Maintainer antworten meist innerhalb von 1 Tag