From 03f8b02c34a6b9d2784e605b89a970fd6494bb0c Mon Sep 17 00:00:00 2001 From: CJ Gammon Date: Mon, 20 Jun 2022 13:58:45 -0500 Subject: [PATCH] Fix interactivity in ShadowDOM (#8406) --- packages/events/src/EventSystem.ts | 10 +++++++++- packages/interaction/src/InteractionManager.ts | 10 +++++++++- 2 files changed, 18 insertions(+), 2 deletions(-) diff --git a/packages/events/src/EventSystem.ts b/packages/events/src/EventSystem.ts index a553bbc187..22cc331441 100644 --- a/packages/events/src/EventSystem.ts +++ b/packages/events/src/EventSystem.ts @@ -258,7 +258,15 @@ export class EventSystem // if we support touch events, then only use those for touch events, not pointer events if (this.supportsTouchEvents && (nativeEvent as PointerEvent).pointerType === 'touch') return; - const outside = nativeEvent.target !== this.domElement ? 'outside' : ''; + let target = nativeEvent.target; + + // if in shadow DOM use composedPath to access target + if (nativeEvent.composedPath && nativeEvent.composedPath().length > 0) + { + target = nativeEvent.composedPath()[0]; + } + + const outside = target !== this.domElement ? 'outside' : ''; const normalizedEvents = this.normalizeToPointerData(nativeEvent); for (let i = 0, j = normalizedEvents.length; i < j; i++) diff --git a/packages/interaction/src/InteractionManager.ts b/packages/interaction/src/InteractionManager.ts index 11cba6d0e7..e5898d2e12 100644 --- a/packages/interaction/src/InteractionManager.ts +++ b/packages/interaction/src/InteractionManager.ts @@ -1224,7 +1224,15 @@ export class InteractionManager extends EventEmitter // if the event wasn't targeting our canvas, then consider it to be pointerupoutside // in all cases (unless it was a pointercancel) - const eventAppend = originalEvent.target !== this.interactionDOMElement ? 'outside' : ''; + let target = originalEvent.target; + + // if in shadow DOM use composedPath to access target + if (originalEvent.composedPath && originalEvent.composedPath().length > 0) + { + target = originalEvent.composedPath()[0]; + } + + const eventAppend = target !== this.interactionDOMElement ? 'outside' : ''; for (let i = 0; i < eventLen; i++) {