[charts-pro] Fix issue where charts gestures weren't properly working when inside the shadow-dom #18837
Conversation
|
Deploy preview: https://deploy-preview-18837--material-ui-x.netlify.app/ Bundle size reportTotal Size Change: 🔺+2.84KB(+0.02%) - Total Gzip Change: 🔺+800B(+0.02%) Show details for 100 more bundles (22 more not shown)@mui/x-charts parsed: 🔺+142B(+0.05%) gzip: 🔺+40B(+0.04%) |
CodSpeed Performance ReportMerging #18837 will not alter performanceComparing Summary
|
| ('getRootNode' in this.element && | ||
| this.element.getRootNode() instanceof ShadowRoot && | ||
| event.composedPath().includes(this.element)) |
There was a problem hiding this comment.
One of the main changes.
| ('getRootNode' in calculatedTarget && | ||
| calculatedTarget.getRootNode() instanceof ShadowRoot && | ||
| pointer.srcEvent.composedPath().includes(calculatedTarget)), |
There was a problem hiding this comment.
Another check for shadowroot
| @@ -124,10 +124,10 @@ export class PointerManager { | |||
| new Set(); | |||
|
|
|||
| public constructor(options: PointerManagerOptions) { | |||
| this.root = (options.root ?? document.documentElement) as HTMLElement; | |||
| this.root = (options.root ?? document.getRootNode({ composed: true })) as HTMLElement; | |||
There was a problem hiding this comment.
We get the root node instead of documentElement, though it shouldn't really change in most cases.
| } | ||
| } | ||
| } else if (type === 'pointermove') { | ||
| if (type === 'pointerdown' || type === 'pointermove') { |
There was a problem hiding this comment.
Removed pointerCapture logic as it is automatically done by the browsers, and was preventing the click in the shadow dom to go through, even though we had a catch there 🤷
| @@ -321,6 +321,7 @@ export class TurnWheelGesture<GestureName extends string> extends Gesture<Gestur | |||
| const domEvent = new CustomEvent(eventName, { | |||
| bubbles: true, | |||
| cancelable: true, | |||
| composed: true, | |||
There was a problem hiding this comment.
On this topic, I'm wondering if instead of true/false the default could be defined by the native event triggering the custom one.
I don't have enough overview on this part of the code so this proposal might make no sense
There was a problem hiding this comment.
They currently follow the native event. All of them have composed:true, except some special events.
composed:true allows events triggered by an element inside shadow-dom to bubble up to elements outside the shadow dom
| @@ -225,7 +226,7 @@ export class GestureManager< | |||
| * @param gestureName - Name of the gesture whose state should be updated | |||
| * @param element - The DOM element where the gesture is attached | |||
| * @param state - New state to apply to the gesture | |||
| * @returns True if the state was successfully updated, false if the gesture wasn't found | |||
| * @returns false if the state was successfully updated, false if the gesture wasn't found | |||
There was a problem hiding this comment.
I assume it's wrong replace all
| * @returns false if the state was successfully updated, false if the gesture wasn't found | |
| * @returns true if the state was successfully updated, false if the gesture wasn't found |
| @@ -321,6 +321,7 @@ export class TurnWheelGesture<GestureName extends string> extends Gesture<Gestur | |||
| const domEvent = new CustomEvent(eventName, { | |||
| bubbles: true, | |||
| cancelable: true, | |||
| composed: true, | |||
There was a problem hiding this comment.
On this topic, I'm wondering if instead of true/false the default could be defined by the native event triggering the custom one.
I don't have enough overview on this part of the code so this proposal might make no sense
Fixes #18826
Test using the provided code
https://stackblitz.com/edit/yua3glfx-bsncmi27?file=package.json
I couldn't replicate the issue from stackblitz in an actual test because the main issue is due to event retargeting in the boundaries around the shadow dom. Which I couldn't simulate 😅
The PR revolves around making the gestures work in the shadowdom in open mode. I've left comments in the most important parts.