Open
Description
Describe the bug
Looks like virtualizer.measureElement is not working with SolidJS
<For each={virtualizer.getVirtualItems()}>{(item) =>
<div
class={item.index % 2 ? 'ListItemOdd' : 'ListItemEven'}
data-index={item.index}
ref={virtualizer.measureElement}
style={{
border: "1px solid red",
"box-sizing": "border-box",
"height": "150px"
}}
>
Row {item.index}
</div>
}</For>
Dirty workaround:
<For each={virtualizer.getVirtualItems()}>{(item) =>
<div
class={item.index % 2 ? 'ListItemOdd' : 'ListItemEven'}
data-index={item.index}
ref={(el) => {
el.dataset.index = item.index.toString(); // <--- see this!
virtualizer.measureElement(el);
}}
style={{
border: "1px solid red",
"box-sizing": "border-box",
"height": "150px"
}}
>
Row {item.index} {Date.now()}
</div>
}</For>
Your minimal, reproducible example
https://codesandbox.io/p/devbox/9rkhxf
Steps to reproduce
Just add
data-index={item.index}
ref={virtualizer.measureElement}
Expected behavior
No warning
How often does this bug happen?
None
Screenshots or Videos
No response
Platform
Chromium 133.0.6943.98
tanstack-virtual version
3.13.0
TypeScript version
No response
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.
Metadata
Metadata
Assignees
Labels
No labels