SolidJS: warning "Missing attribute name 'data-index={index}' on measured element."

リンクされているCodeSandboxの再現例と、SolidJSでのvirtualizer.measureElementの使用方法から始めてください。特に、issueに示されているdata-index属性とref属性を確認してください。測定コールバックがどのように要素を読み取るかを追跡し、最初にel.dataset.indexを割り当てる回避策と比較してください。再現例でmissing-attribute warningが出なくなり、測定も引き続き機能すれば完了です。

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.