Skip to content

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

Open

Description

@clean99

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.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions