svelte-virtual renders no rows when the scroll element is bound after the store subscribes

Abierto
  • ¿Algo no está bien?
#1,367 0 comentarios 0 reacciones 0 asignados Ver en GitHub

Los mantenedores suelen responder en 1 día

@clean99 ya está trabajando en esto.

Desde el 4/11/2026.

  • #1368 de @clean99 — abierto

Evaluación

Dificultad
4/5
Tiempo estimado
1-2 días
Aptitud para principiantes
35/100
Tipo de issue
Error
Claridad
Bien especificado
Estado de actividad
Estancado
Stack tecnológico
typescript
Área
frontend

Línea de trabajo

Start with the Svelte adapter’s createVirtualizer implementation and compare when it calls _willUpdate with the other adapters’ render or mount hooks. Reproduce the issue using the linked svelte-late-scroll-element example and inspect how a late bind:this assignment is handled. Done means all three lists render their seven visible rows; pull request #1368 is already open against this issue.

Escrito por el modelo de indexación a partir del texto del issue.

Descripción

Describe the bug

A Svelte virtualizer whose scroll element is assigned with bind:this renders no rows when the store is subscribed before the element is bound and nothing calls setOptions afterwards. The store's start callback reads getScrollElement() once, gets null, and attaches no observers.

This hits createVirtualizer inside $derived on Svelte 5 (the empty table in #866, worked around there by calling $virtualizer._willUpdate() after mount) and a virtualizer created once, as suggested in #656, when the count does not change after mount. The Svelte examples render because $: virtualizer = createVirtualizer(...) re-creates the virtualizer after the element is bound.

Your minimal, reproducible example

https://github.com/clean99/oss-pr-media/tree/main/tanstack-virtual/svelte-late-scroll-element

Steps to reproduce
  1. In the reproduction directory, run npm ci and npm run dev, then open the printed URL.
  2. The page shows three lists of 1000 rows. Each has a 200px scroll container assigned with bind:this.
  3. "$derived" and "created once" show 0 rows and an empty container. "control" shows 7 rows: its getScrollElement reads the element inside $derived, so it is re-created after binding.
Expected behavior

All three lists render their visible rows (7 for a 200px container with 35px rows).

How often does this bug happen?

Every time.

Screenshots or Videos

The heading above each list prints its row count.

Platform

macOS, Chromium (Playwright headless shell), Node.js 24.8.0, Svelte 5.57.3. The created-once component also renders 0 rows on Svelte 4.2.20.

tanstack-virtual version

@tanstack/svelte-virtual 3.13.52

TypeScript version

The reproduction uses JavaScript.

Additional context

The other adapters call _willUpdate after render or mount (React's layout effect, the Vue watcher on getScrollElement, Solid's onMount, Angular's afterRenderEffect, Lit's hostUpdated), so they pick up a ref assigned during render. In the Svelte adapter it only runs inside setOptions.

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.
Lenguaje dominante
TypeScript
Estrellas
7.2k
Forks
490
Merge medio
15 h 28 min
PR fusionados (30 d)
48

Preparar el entorno

Primeros pasos

  1. Lee el issue completo y luego la guía de contribución del proyecto.
  2. Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
  3. Haz un fork del repositorio y trabaja en una rama.
  4. Abre un pull request que haga referencia al número del issue.

Más de TanStack/virtual

Todos los issues de TanStack/virtual

Issues similares

Más issues de TypeScript

Recibe los nuevos issues en tu correo

Un resumen breve de issues de GitHub para principiantes.