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

Aberta
  • Algo errado?
#1,367 0 comentários 0 reações 0 responsáveis Ver no GitHub

Mantenedores costumam responder em até 1 dia

@clean99 já está trabalhando nisso.

Desde 4/11/2026.

  • #1368 de @clean99 — aberto

Avaliação

Dificuldade
4/5
Tempo estimado
1-2 dias
Facilidade para iniciantes
35/100
Tipo de issue
Bug
Clareza
Claramente especificada
Status de atividade
Estagnada
Stack de tecnologia
typescript
Domínio
frontend

Direção de pesquisa

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.

Escrita pelo modelo de indexação a partir do texto da issue.

Descrição

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.
Linguagem predominante
TypeScript
Estrelas
7.2k
Forks
490
Merge médio
15h 28min
PRs com merge (30d)
48

Preparar o ambiente

Primeiros passos

  1. Leia a issue inteira e depois o guia de contribuição do projeto.
  2. Comente na issue dizendo que vai assumir — evita que duas pessoas façam o mesmo trabalho.
  3. Faça um fork do repositório e trabalhe em uma branch.
  4. Abra um pull request que referencie o número da issue.

Mais de TanStack/virtual

Todas as issues de TanStack/virtual

Issues semelhantes

Mais issues de TypeScript

Receba novas issues na sua caixa de entrada

Um resumo curto de issues do GitHub para quem está começando.