SolidJS: warning "Missing attribute name 'data-index={index}' on measured element."
Nessuno ha ancora preso questa issue.
Valutazione
- Difficoltà
- 3/5
- Tempo stimato
- 1-2 giorni
- Idoneità per principianti
- 38/100
- Tipo di issue
- Bug
- Chiarezza
- Abbastanza chiara
- Stato di attività
- Ferma
- Stack tecnologico
- typescript
- Ambito
- frontend, performance
Direzione di ricerca
Inizia con la riproduzione collegata di CodeSandbox e con l’utilizzo di virtualizer.measureElement in SolidJS, in particolare con gli attributi data-index e ref mostrati nell’issue. Traccia il modo in cui il callback di misurazione legge l’elemento e confrontalo con il workaround che assegna prima el.dataset.index. Il lavoro è completato quando la riproduzione non emette più l’avviso relativo all’attributo mancante, mentre la misurazione continua a funzionare.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Descrizione
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.
- Lingua principale
- TypeScript
- Stelle
- 7.1k
- Fork
- 466
- Merge medio
- 2g 31m
- PR unite (30g)
- 13
Guida per i contributori
Apri la guida per i contributori
Come iniziare
- Leggi tutta la issue e poi la guida ai contributi del progetto.
- Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
- Fai un fork del repository e lavora su un branch.
- Apri una pull request che faccia riferimento al numero della issue.
Altre issue di TanStack/virtual
-
Difficoltà 4/5 3-5 giorni Idoneità per principianti 55/100
-
Difficoltà 5/5 Più di una settimana Idoneità per principianti 38/100
-
Difficoltà 4/5 3-5 giorni Idoneità per principianti 62/100
-
Difficoltà 4/5 3-5 giorni Idoneità per principianti 55/100
-
Difficoltà 3/5 1-2 giorni Idoneità per principianti 68/100
Tutte le issue di TanStack/virtual
Issue simili
-
Difficoltà 2/5 1-3 ore Idoneità per principianti 75/100
vercel-labs/just-bash#464 ·
-
looksLikeSlug() is ASCII-only, so non-Latin entity slugs (e.g. Korean) skip exact match and collapse Aperta
Difficoltà 2/5 1-3 ore Idoneità per principianti 75/100
-
Difficoltà 2/5 1-3 ore Idoneità per principianti 65/100
-
Difficoltà 2/5 1-3 ore Idoneità per principianti 65/100
-
Difficoltà 1/5 Meno di un'ora Idoneità per principianti 90/100
TanStack/tanstack.com#1293 ·