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

Đang mở
  • Có gì không ổn?
#1,367 0 bình luận 0 reaction 0 người được giao Xem trên GitHub

Maintainer thường phản hồi trong vòng 1 ngày

@clean99 đang làm issue này rồi.

Từ ngày 4/11/2026.

  • #1368 của @clean99 — đang mở

Đánh giá

Độ khó
4/5
Thời gian dự kiến
1-2 ngày
Mức phù hợp với người mới
35/100
Loại issue
Lỗi
Độ rõ ràng
Đặc tả rõ ràng
Mức độ hoạt động
Đình trệ
Công nghệ
typescript
Lĩnh vực
frontend

Hướng nghiên cứu

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.

Do mô hình lập chỉ mục viết ra từ nội dung của issue.

Mô tả

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.
Ngôn ngữ chính
TypeScript
Star
7.2k
Fork
490
Merge trung bình
15 giờ 28 phút
Pull request đã merge (30 ngày)
48

Chuẩn bị môi trường

Bắt đầu từ đâu

  1. Đọc hết issue, rồi đọc hướng dẫn đóng góp của dự án.
  2. Bình luận trên issue rằng bạn sẽ nhận — tránh hai người làm cùng một việc.
  3. Fork repository và làm thay đổi trên một nhánh.
  4. Mở pull request có tham chiếu số hiệu của issue.

Issue khác của TanStack/virtual

Tất cả issue của TanStack/virtual

Issue tương tự

Thêm issue về TypeScript

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.