-
-
Notifications
You must be signed in to change notification settings - Fork 381
Description
Describe the bug
There is a similar issue here: #1036
When using measureElement with useVirtualizer, changing the number of lanes dynamically causes the layout to break.
In my case, some of the virtual items returned by getVirtualItems()
still have the old measurements as they don't get re-calculated. For example if I change lanes to a smaller number, some items still have the old larger lane, causing layout to break.
My debugging suggests the problem might be the minimum pendingMeasuredCacheIndexes
, it wrongly skipped some of the items that should be visible, so their measurements are not re-calcualted.
Your minimal, reproducible example
https://github.com/hmpthz/another-react-responsive-masonry/tree/main/packages/example
Steps to reproduce
I actually created a repo trying to showcase and solve this. You can see the example above. Basically, the problem happens like this:
const { currentBreakpoint } = useBreakpoint(breakpointColumns);
const lanes = currentBreakpoint.nCol; // changing lanes dynamically
const rowVirtualizer = useWindowVirtualizer({
lanes: currentBreakpoint.nCol,
...others
});
const virtualItems = rowVirtualizer.getVirtualItems();
const columns = useMemo(() => {
const arr = Array.from({ length: lanes }, () => [] as VirtualItem[]);
for (const item of virtualItems) {
arr[item.lane].push(item); // you'll get error as lane is out of bound
}
return arr;
}, [virtualItems, lanes]);
Expected behavior
The measurements of all virtual items in the range get correctly re-calculated
How often does this bug happen?
Every time
Screenshots or Videos
No response
Platform
Any platform
tanstack-virtual version
v3.13.12
TypeScript version
v5.9.3
Additional context
While trying to solve this problem, I made significant changes to the sourcecode that I feel like might not be suitable for a PR to the original repo, so eventually I create a new one: https://github.com/hmpthz/another-react-responsive-masonry
I wonder if you have plan to solve this issue?
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.