-
-
Notifications
You must be signed in to change notification settings - Fork 403
Open
Description
Describe the bug
In a virtualized list using @tanstack/vue-virtual, reordering items with dynamic or varying sizes (e.g., different heights) does not trigger a recalculation of their cached measurements. As a result, the items retain their initial rendered dimensions post-reorder, leading to visual artifacts such as:
- Larger items being clipped or overflowing within the constrained space originally allocated to smaller items.
- Smaller items leaving empty gaps due to mismatched container sizes.
Your minimal, reproducible example
https://stackblitz.com/edit/tanstack-virtual-xbv5kvkh?file=src%2FApp.vue
Steps to reproduce
- Click the Swap button
- Look at the list's second and third items
Expected behavior
After reordering, the virtualizer should re-measure and update the sizes for affected items
How often does this bug happen?
Every time
Screenshots or Videos
No response
Platform
- Windows - Chrome - v.142.0.7444.61
tanstack-virtual version
v3.13.12
TypeScript version
v5.4.5
Additional context
No response
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.
Ilanaya, Misha6787, p-harelik, yodakit, mpoweredo and 1 more
Metadata
Metadata
Assignees
Labels
No labels