Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
2 tasks done
Azq2 opened this issue Feb 18, 2025 · 0 comments
Open
2 tasks done

Comments

@Azq2
Copy link
Contributor

Azq2 commented Feb 18, 2025

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.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant