SolidJS: warning "Missing attribute name 'data-index={index}' on measured element."
Nadie ha tomado este issue todavía.
Evaluación
- Dificultad
- 3/5
- Tiempo estimado
- 1-2 días
- Aptitud para principiantes
- 38/100
- Tipo de issue
- Error
- Claridad
- Bastante claro
- Estado de actividad
- Estancado
- Stack tecnológico
- typescript
- Área
- frontend, performance
Línea de trabajo
Comienza con la reproducción vinculada de CodeSandbox y el uso de virtualizer.measureElement en SolidJS, especialmente los atributos data-index y ref mostrados en el issue. Rastrea cómo el callback de medición lee el elemento y compáralo con la solución alternativa que asigna primero el.dataset.index. Se considera terminado cuando la reproducción ya no emite la advertencia de atributo faltante y la medición sigue funcionando.
Escrito por el modelo de indexación a partir del texto del issue.
Descripción
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.
- Lenguaje dominante
- TypeScript
- Estrellas
- 7.1k
- Forks
- 466
- Merge medio
- 2 d 31 min
- PR fusionados (30 d)
- 13
Guía de contribución
Primeros pasos
- Lee el issue completo y luego la guía de contribución del proyecto.
- Comenta en el issue que vas a ocuparte — evita que dos personas hagan lo mismo.
- Haz un fork del repositorio y trabaja en una rama.
- Abre un pull request que haga referencia al número del issue.
Más de TanStack/virtual
-
Dificultad 4/5 3-5 días Aptitud para principiantes 55/100
-
Dificultad 5/5 Más de una semana Aptitud para principiantes 38/100
-
Dificultad 4/5 3-5 días Aptitud para principiantes 62/100
-
Dificultad 4/5 3-5 días Aptitud para principiantes 55/100
-
Dificultad 3/5 1-2 días Aptitud para principiantes 68/100
Todos los issues de TanStack/virtual
Issues similares
-
blocklist removal
Dificultad 2/5 1-3 horas Aptitud para principiantes 65/100
MetaMask/eth-phishing-detect#296544 ·
-
Dificultad 2/5 1-3 horas Aptitud para principiantes 70/100
pastelsky/bundlephobia#1122 ·
-
Dificultad 2/5 1-3 horas Aptitud para principiantes 70/100
-
category/development priority/P2 scope/file-operations scope/testing type/enhancement
Dificultad 2/5 1-3 horas Aptitud para principiantes 75/100
-
Enatega Customer and Rider app: Add-ons price is not visible to customer after order is placed. Abierto
Dificultad 2/5 1-3 horas Aptitud para principiantes 75/100