[charts] Remove compatibility layer for React vs native events#21780
Draft
JCQuintas wants to merge 11 commits intomui:masterfrom
Draft
[charts] Remove compatibility layer for React vs native events#21780JCQuintas wants to merge 11 commits intomui:masterfrom
JCQuintas wants to merge 11 commits intomui:masterfrom
Conversation
Centralize pointer interaction handling in ChartsLayerContainer instead of attaching event handlers to individual chart items. The hook now iterates through all series configs' getItemAtPosition to find the item at the pointer position. - Refactor useRegisterPointerInteractions to iterate through series configs - Add getItemAtPosition to bar and line series configs - Remove skip parameter from useInteractionItemProps - Add DOMMatrix fallback in getChartPoint for JSDOM environments
Remove shouldRegisterPointerInteractionsGlobally and always use container-level pointer tracking for heatmap interactions. The compat layer was added in v8 to support custom cell slots with item-level event handlers.
Remove useInteractionItemProps from BarElement and per-item useRegisterPointerInteractions from BatchBarPlot/IndividualBarPlot. Pointer interactions are now handled centrally by ChartsLayerContainer. BREAKING CHANGE: BarPlot onItemClick now receives a native MouseEvent instead of React.MouseEvent.
Remove useInteractionItemProps from MarkElement, CircleMarkElement, LineElement, and AreaElement. Pointer interactions are now handled centrally by ChartsLayerContainer using getItemAtPosition.
Remove skip parameter usage from PieArc and per-component useRegisterPointerInteractions from CandlestickPlot. These are now handled centrally.
|
Deploy preview: https://deploy-preview-21780--material-ui-x.netlify.app/ Updated pages: Bundle size report
|
Merging this PR will improve performance by 11.59%
|
| Mode | Benchmark | BASE |
HEAD |
Efficiency | |
|---|---|---|---|---|---|
| ⚡ | Simulation | Heatmap: 100x100 grid |
9.9 s | 8.9 s | +11.59% |
| ⚡ | Simulation | LineChart with big data amount (with marks) |
1.6 s | 1.5 s | +8.81% |
Comparing JCQuintas:pointer-handlers (04ddc86) with master (8c684af)
JCQuintas
commented
Mar 18, 2026
Comment on lines
+152
to
+159
| const barRect = bars[0].getBoundingClientRect(); | ||
| await user.pointer({ | ||
| target: bars[0], | ||
| coords: { | ||
| clientX: barRect.left + barRect.width / 2, | ||
| clientY: barRect.top + barRect.height / 2, | ||
| }, | ||
| }); |
Member
Author
There was a problem hiding this comment.
user.pointer() creates events with clientX/clientY defaulting to (0, 0), so we need to explicitly set them now.
This is because under the hood it doesn't fire real events, it only checks if the target has changed and fires the events that would supposedly happen from that.
Now we need to manually move the pointer to where we need.
Contributor
|
This pull request has conflicts, please resolve those before we can evaluate the pull request. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
ChartsLayerContainerinstead of attaching event handlers to individual chart items (bars, lines, marks, heatmap cells)shouldRegisterPointerInteractionsGloballycompatibility layer added in [charts-pro] Prefer global pointer interaction tracker in Heatmap #20697getItemAtPositionto bar and line series configs, enabling container-level hit detection for these chart typesuseRegisterPointerInteractionsto iterate through all series configs rather than requiring per-chart-type registrationBreaking changes
BarPlot.onItemClicknow receives a nativeMouseEventinstead ofReact.MouseEventuseInteractionItemPropsno longer accepts askipparameteronPointerEnterin slotProps no longer fall back to item-level event handlersCloses #20957