React custom tooltip body shows the previous point for a frame after a pointer move
Maintainer antworten meist innerhalb von 1 Tag
Bewertung
- Schwierigkeit
- 3/5
- Geschätzter Aufwand
- 1-2 Tage
- Anfängerfreundlichkeit
- 35/100
- Issue-Typ
- Bug
- Klarheit
- Klar beschrieben
- Aktivitätsstatus
- Veraltet
- Tech-Stack
- react, typescript
- Bereich
- data-visualization, frontend
Rechercherichtung
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.
Vom Indexierungsmodell aus dem Issue-Text verfasst.
Beschreibung
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.
- Vorherrschende Sprache
- TypeScript
- Sterne
- 850
- Forks
- 56
- Ø Merge
- 3 Std. 59 Min.
- Gemergte PRs (30 T.)
- 19
Entwicklungsumgebung
- Kein Dockerfile und keine Docker-Compose-Datei
- Keine Pull-Request-Vorlage
- Beitragsleitfaden lesen
Erste Schritte
- Lesen Sie das ganze Issue und danach den Beitragsleitfaden des Projekts.
- Schreiben Sie ins Issue, dass Sie es übernehmen — das erspart doppelte Arbeit.
- Forken Sie das Repository und arbeiten Sie in einem Branch.
- Öffnen Sie einen Pull Request, der die Issue-Nummer nennt.
Mehr aus TanStack/charts
-
[Bug] Focus guides: `url(#id)` paints ignore `idPrefix`Evtl. vergeben @getdownandcode hat das vor 11 Tagen übernommen. Offen
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 78/100
TanStack/charts#211 · 1 Kommentar ·
Maintainer antworten meist innerhalb von 1 Tag
-
[Bug] Printed charts keep their screen width: resize redraw waits for an animation frameEvtl. vergeben @piecyk hat das vor 11 Tagen übernommen. Offen
Schwierigkeit 3/5 1-2 Tage Anfängerfreundlichkeit 25/100
Maintainer antworten meist innerhalb von 1 Tag
-
[Feature] Readable outside labels for crowded pie and donut chartsEvtl. vergeben Ein verknüpfter Pull Request ist offen oder bereits gemergt. Offen
Schwierigkeit 5/5 Über eine Woche Anfängerfreundlichkeit 25/100
TanStack/charts#227 · 2 Kommentare ·
Maintainer antworten meist innerhalb von 1 Tag
-
Schwierigkeit 5/5 Über eine Woche Anfängerfreundlichkeit 42/100
TanStack/charts#216 · 1 Kommentar ·
Maintainer antworten meist innerhalb von 1 Tag
-
Schwierigkeit 4/5 3-5 Tage Anfängerfreundlichkeit 57/100
Maintainer antworten meist innerhalb von 1 Tag
Alle Issues in TanStack/charts
Ähnliche Issues
-
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 68/100
awesome-dsh-plugin/awesome-dsh-plugin#9184 ·
Maintainer antworten meist innerhalb von 1 Tag
-
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 75/100
Maintainer antworten meist innerhalb von 1 Tag
-
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 85/100
farion1231/cc-switch#8829 ·
Maintainer antworten meist innerhalb von 1 Tag
-
[core-client] Remove unused hand-maintained transport helpers after the definition-table cutoverOffendoc-audit enhancement
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 88/100
Maintainer antworten meist innerhalb von 1 Tag
-
Schwierigkeit 2/5 1-3 Stunden Anfängerfreundlichkeit 85/100