React custom tooltip body shows the previous point for a frame after a pointer move
I maintainer di solito rispondono entro 1 giorno
Valutazione
- Difficoltà
- 3/5
- Tempo stimato
- 1-2 giorni
- Idoneità per principianti
- 35/100
- Tipo di issue
- Bug
- Chiarezza
- Specificata chiaramente
- Stato di attività
- Ferma
- Stack tecnologico
- react, typescript
- Ambito
- data-visualization, frontend
Direzione di ricerca
Start with charts-core/src/tooltip.ts and the React adapter’s TooltipBody, then trace bodyChange from paint() and the adapter’s update/destroy paths. The issue proposes using flushSync for interaction updates while keeping plain state updates during lifecycle work. Done means pointer moves show the current tooltip body without a one-frame flicker and keyboard moves still work; pull request #240 is already open.
Scritto dal modello di indicizzazione a partire dal testo della issue.
Descrizione
What happens
With a custom React tooltip body (renderTooltipBody from @tanstack/react-charts/tooltip), moving the pointer to another point shows the previous point's body at the new point's position for one frame. The tooltip then updates. It reads as a flicker on every hover move.
Why
paint() in charts-core/src/tooltip.ts positions the tooltip element and calls bodyChange in the same task. The React adapter's TooltipBody answers with a plain setTarget(). React schedules a state update from a native pointermove listener at continuous priority, which renders in a later task. The browser paints in between, so the frame shows the moved element with the old body.
A keyboard move doesn't show it: React flushes a discrete-event update in a microtask, before the paint.
Reproduce
Any RendererChart with focus: "group-x" and a renderTooltipBody. Move the pointer slowly across the points, or record the screen and step through the frames.
Seen on @tanstack/charts 1.0.0 (/react/tooltip) and still present on main (a2e82ab).
Possible fix
Flush the body update with flushSync when the call comes from an interaction. Keep the plain setState when the adapter repaints inside React's layout effect (adapter.update/destroy), where flushSync warns ("flushSync was called from inside a lifecycle method"). I'll open a PR with that.
- Lingua principale
- TypeScript
- Stelle
- 850
- Fork
- 56
- Merge medio
- 3h 59m
- PR unite (30g)
- 19
Preparare l'ambiente
- Nessun Dockerfile né file Docker Compose
- Nessun modello di pull request
- Leggi 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/charts
-
[Bug] Focus guides: `url(#id)` paints ignore `idPrefix`Forse già presa @getdownandcode l’ha presa 13 giorni fa. Aperta
Difficoltà 2/5 1-3 ore Idoneità per principianti 78/100
TanStack/charts#211 · 1 commento ·
I maintainer di solito rispondono entro 1 giorno
-
[Bug] Printed charts keep their screen width: resize redraw waits for an animation frameForse già presa @piecyk l’ha presa 13 giorni fa. Aperta
Difficoltà 3/5 1-2 giorni Idoneità per principianti 25/100
I maintainer di solito rispondono entro 1 giorno
-
[Feature] Readable outside labels for crowded pie and donut chartsForse già presa Una pull request collegata a questa issue è aperta o già unita. Aperta
Difficoltà 5/5 Più di una settimana Idoneità per principianti 25/100
TanStack/charts#227 · 2 commenti ·
I maintainer di solito rispondono entro 1 giorno
-
Difficoltà 5/5 Più di una settimana Idoneità per principianti 42/100
TanStack/charts#216 · 1 commento ·
I maintainer di solito rispondono entro 1 giorno
-
Difficoltà 4/5 3-5 giorni Idoneità per principianti 57/100
I maintainer di solito rispondono entro 1 giorno
Tutte le issue di TanStack/charts
Issue simili
-
category::task code priority::normal
Difficoltà 2/5 1-3 ore Idoneità per principianti 78/100
e0ipso/strikethroo#145 ·
I maintainer di solito rispondono entro 1 giorno
-
Difficoltà 1/5 1-3 ore Idoneità per principianti 85/100
cocos/cocos-docs#3333 ·
-
bug
Difficoltà 2/5 1-3 ore Idoneità per principianti 75/100
RevenueCat/react-native-purchases#2079 ·
I maintainer di solito rispondono entro 1 giorno
-
bug
Difficoltà 2/5 1-3 ore Idoneità per principianti 78/100
RevenueCat/purchases-hybrid-common#2039 ·
I maintainer di solito rispondono entro 1 giorno
-
agent-reported area/react bug
Difficoltà 2/5 1-3 ore Idoneità per principianti 82/100
I maintainer di solito rispondono entro 1 giorno