From 3c5333c3b45a003f7c030b576fb020a4e6f299e2 Mon Sep 17 00:00:00 2001 From: Joel Mandell Date: Tue, 4 Jun 2024 15:07:32 +0200 Subject: [PATCH 1/4] fix(VOverlay): Use Shadow dom if mounted within shadow dom. --- packages/vuetify/src/components/VOverlay/VOverlay.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/vuetify/src/components/VOverlay/VOverlay.tsx b/packages/vuetify/src/components/VOverlay/VOverlay.tsx index 75da73ed33b..edaf2e7c855 100644 --- a/packages/vuetify/src/components/VOverlay/VOverlay.tsx +++ b/packages/vuetify/src/components/VOverlay/VOverlay.tsx @@ -140,7 +140,6 @@ export const VOverlay = genericComponent()({ if (!(v && props.disabled)) model.value = v }, }) - const { teleportTarget } = useTeleport(computed(() => props.attach || props.contained)) const { themeClasses } = provideTheme(props) const { rtlClasses, isRtl } = useRtl() const { hasContent, onAfterLeave: _onAfterLeave } = useLazy(props, isActive) @@ -155,6 +154,8 @@ export const VOverlay = genericComponent()({ contentEvents, scrimEvents, } = useActivator(props, { isActive, isTop: localTop }) + const potentialShadowDomRoot = (activatorEl?.value as Element)?.getRootNode() as Element; + const { teleportTarget } = useTeleport(computed(() => props.attach || props.contained || potentialShadowDomRoot instanceof ShadowRoot ? potentialShadowDomRoot : false)) const { dimensionStyles } = useDimension(props) const isMounted = useHydration() const { scopeId } = useScopeId() From fdacb3dce5005eb6b8cc06af15ee6be71ad5388d Mon Sep 17 00:00:00 2001 From: Joel Mandell Date: Tue, 4 Jun 2024 15:29:52 +0200 Subject: [PATCH 2/4] potentialShadowDomRoot as computed --- packages/vuetify/src/components/VOverlay/VOverlay.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/vuetify/src/components/VOverlay/VOverlay.tsx b/packages/vuetify/src/components/VOverlay/VOverlay.tsx index edaf2e7c855..112b3d44f18 100644 --- a/packages/vuetify/src/components/VOverlay/VOverlay.tsx +++ b/packages/vuetify/src/components/VOverlay/VOverlay.tsx @@ -154,8 +154,8 @@ export const VOverlay = genericComponent()({ contentEvents, scrimEvents, } = useActivator(props, { isActive, isTop: localTop }) - const potentialShadowDomRoot = (activatorEl?.value as Element)?.getRootNode() as Element; - const { teleportTarget } = useTeleport(computed(() => props.attach || props.contained || potentialShadowDomRoot instanceof ShadowRoot ? potentialShadowDomRoot : false)) + const potentialShadowDomRoot = computed( () => (activatorEl?.value as Element)?.getRootNode() as Element); + const { teleportTarget } = useTeleport(computed(() => props.attach || props.contained || potentialShadowDomRoot.value instanceof ShadowRoot ? potentialShadowDomRoot.value : false)) const { dimensionStyles } = useDimension(props) const isMounted = useHydration() const { scopeId } = useScopeId() From a2104a1e9b2f33d7bcf1dcb6a7dd77d3592360bd Mon Sep 17 00:00:00 2001 From: Joel Mandell Date: Tue, 4 Jun 2024 15:47:58 +0200 Subject: [PATCH 3/4] fix linting --- packages/vuetify/src/components/VOverlay/VOverlay.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/vuetify/src/components/VOverlay/VOverlay.tsx b/packages/vuetify/src/components/VOverlay/VOverlay.tsx index 112b3d44f18..4626de620d0 100644 --- a/packages/vuetify/src/components/VOverlay/VOverlay.tsx +++ b/packages/vuetify/src/components/VOverlay/VOverlay.tsx @@ -154,8 +154,9 @@ export const VOverlay = genericComponent()({ contentEvents, scrimEvents, } = useActivator(props, { isActive, isTop: localTop }) - const potentialShadowDomRoot = computed( () => (activatorEl?.value as Element)?.getRootNode() as Element); - const { teleportTarget } = useTeleport(computed(() => props.attach || props.contained || potentialShadowDomRoot.value instanceof ShadowRoot ? potentialShadowDomRoot.value : false)) + const potentialShadowDomRoot = computed( () => (activatorEl?.value as Element)?.getRootNode() as Element) + const { teleportTarget } = useTeleport(computed(() => props.attach || props.contained + || potentialShadowDomRoot.value instanceof ShadowRoot ? potentialShadowDomRoot.value : false)) const { dimensionStyles } = useDimension(props) const isMounted = useHydration() const { scopeId } = useScopeId() From 6cfa75ae8092747f514a34f68695379ac248d440 Mon Sep 17 00:00:00 2001 From: Joel Mandell Date: Tue, 4 Jun 2024 16:00:23 +0200 Subject: [PATCH 4/4] fix linting errors. --- packages/vuetify/src/components/VOverlay/VOverlay.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/vuetify/src/components/VOverlay/VOverlay.tsx b/packages/vuetify/src/components/VOverlay/VOverlay.tsx index 4626de620d0..97e6460a56b 100644 --- a/packages/vuetify/src/components/VOverlay/VOverlay.tsx +++ b/packages/vuetify/src/components/VOverlay/VOverlay.tsx @@ -154,9 +154,9 @@ export const VOverlay = genericComponent()({ contentEvents, scrimEvents, } = useActivator(props, { isActive, isTop: localTop }) - const potentialShadowDomRoot = computed( () => (activatorEl?.value as Element)?.getRootNode() as Element) - const { teleportTarget } = useTeleport(computed(() => props.attach || props.contained - || potentialShadowDomRoot.value instanceof ShadowRoot ? potentialShadowDomRoot.value : false)) + const potentialShadowDomRoot = computed(() => (activatorEl?.value as Element)?.getRootNode() as Element) + const { teleportTarget } = useTeleport(computed(() => props.attach || props.contained || + potentialShadowDomRoot.value instanceof ShadowRoot ? potentialShadowDomRoot.value : false)) const { dimensionStyles } = useDimension(props) const isMounted = useHydration() const { scopeId } = useScopeId()