Measurements of virtual items don't get re-calculated when lanes are changed (with `measureElement`)
维护者通常 1 天内回复
还没有人认领这个 Issue。
评估
- 难度
- 4/5
- 预计耗时
- 3-5 天
- 新手友好度
- 45/100
- Issue 类型
- 缺陷
- 描述清晰度
- 基本清楚
- 活跃度
- 停滞
- 技术栈
- react, typescript
- 领域
- frontend
调研方向
从 packages/example 中的复现用例以及 issue 中描述的 useWindowVirtualizer 配置开始。跟踪 lanes 值发生变化时 getVirtualItems() 如何处理 measureElement 的测量结果。完成标准是：lanes 发生变化后，范围内的所有虚拟项都会重新测量，没有任何项保留无效的 lane，并且布局不会崩溃。
由索引模型根据 Issue 内容生成。
描述
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.
- 主要语言
- TypeScript
- 星标
- 7.1k
- 派生
- 472
- 平均合并
- 1 天 2 小时
- 30 天内合并 PR
- 12
环境准备
- 没有 Dockerfile 或 Docker Compose 文件
- 有 Pull Request 模板
- 阅读贡献指南
从这里开始
- 先读完整个 Issue，再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库，在一个分支上完成修改。
- 提交 Pull Request，并在描述里引用这个 Issue 编号。
TanStack/virtual 的其他 Issue
-
measureElement caches 0 size for nodes that aren't attached yet (Vue: rows stack at start 0 and the list scrolls away on mount)可能已有人在做 @webn00b 于 10 天前认领。 未关闭
难度 2/5 1-3 小时 新手友好度 78/100
维护者通常 1 天内回复
-
`scrollToIndex(last, { align: 'end' })` stays short of the end after a measured row grows (virtual-core ≥ 3.17.0)可能已有人在做 @minwookshin 于 8 天前认领。 未关闭
难度 4/5 3-5 天 新手友好度 55/100
TanStack/virtual#1290 · 1 条评论 ·
维护者通常 1 天内回复
-
virtual-core: desktop Safari drops the prepend anchor write when history lands during the top rubber-band bounce可能已有人在做 关联的 PR 仍在进行中或已合并。 未关闭
难度 5/5 一周以上 新手友好度 38/100
维护者通常 1 天内回复
-
难度 4/5 3-5 天 新手友好度 62/100
维护者通常 1 天内回复
-
marko-virtual: scrollToEnd during an in-flight prepend strands the view one prepend above the bottom (chat-pretext e2e fails on CI)可能重新可做 关联的 PR 已关闭且未合并。 未关闭
难度 4/5 3-5 天 新手友好度 55/100
维护者通常 1 天内回复
相似的 Issue
-
难度 1/5 1 小时以内 新手友好度 72/100
profullstack/ugig.net#601 · 1 条评论 ·
维护者通常 1 天内回复
-
难度 1/5 1 小时以内 新手友好度 90/100
github/codeql-action#4202 ·
维护者通常 1 天内回复
-
agents: formatReport/reportOrigin only importable through an entry that loads every runtime (~1.5 s)未关闭
难度 2/5 1-3 小时 新手友好度 68/100
维护者通常 1 天内回复
-
难度 2/5 1-3 小时 新手友好度 78/100
维护者通常 1 天内回复
-
area:runtime bug
难度 2/5 1-3 小时 新手友好度 80/100
维护者通常 1 天内回复