inokawa / virtua

A zero-config, fast and small (~3kB) virtual list (and grid) component for React, Vue, Solid and Svelte.
https://inokawa.github.io/virtua/
MIT License
1.35k stars 49 forks source link

Svelte: positions do not update when virtual list items resize #487

Closed aaronjbecker closed 3 months ago

aaronjbecker commented 3 months ago

First off, thanks for creating Svelte components!

Describe the bug I have some virtual list items that display contents that change in response to a filter. When the contents of the virtual list items change, the height of the item itself can change. It does not seem like the VList is observing the element size on an ongoing basis; new sizes are only reflected when you scroll a virtual list item off screen.

To Reproduce See this StackBlitz for a reproduction-- I've added a button to one of the Storybook examples that randomly resizes the list elements; when the items resize they either overlap or leave gaps.

Sometimes the list does response to size changes for some elements without scrolling them offscreen, but I haven't pinned down the circumstances under which size updates are accurately reflected.

Expected behavior Svelte VList component observes height of child elements and recalculates absolute positions when the size of a child element changes due to content changes.

Alternatively, a way to manually trigger size/position recalculation on the VList component would work too.

Platform: See StackBlitz reproduction; using Svelte 5, but behavior persists in Svelte 4@latest.

Additional context I don't know if this is a fundamental limitation of virtua given its architecture or an issue with the Svelte components. IDK if ResizeObserver is being applied to virtual list items on an ongoing basis.

I often find myself using virtual lists where the size of one or more rows can change, like table rows with expandable details, and I'd really like to figure out how to get this to work with Virtua b/c it seems a lot more straightforward than @tanstack/svelte-virtual.

inokawa commented 3 months ago

The basic architecture of virtua is that the core having external state updates frameworks' state of each adapters. React adapter doesn't have this problem so probably it's happening because the connection between the core and Svelte's state management system is incorrect.

inokawa commented 3 months ago

Probably fixed in 0.33.6.