fix(VOverlay): correct ShadowRoot attach condition

fixes #20001 fixes #20086
vuetifyjs · Jul 3, 2024 · ec73e6f · ec73e6f
1 parent be3e401
commit ec73e6f
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 8 deletions.
diff --git a/packages/vuetify/src/components/VOverlay/VOverlay.tsx b/packages/vuetify/src/components/VOverlay/VOverlay.tsx
@@ -154,9 +154,13 @@ export const VOverlay = genericComponent<OverlaySlots>()({
       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 ?? true : false))
+    const { teleportTarget } = useTeleport(() => {
+      const target = props.attach || props.contained
+      if (target) return target
+      const rootNode = activatorEl?.value?.getRootNode()
+      if (rootNode instanceof ShadowRoot) return rootNode
+      return false
+    })
     const { dimensionStyles } = useDimension(props)
     const isMounted = useHydration()
     const { scopeId } = useScopeId()

diff --git a/packages/vuetify/src/composables/teleport.ts b/packages/vuetify/src/composables/teleport.ts
@@ -2,12 +2,9 @@
 import { computed, warn } from 'vue'
 import { IN_BROWSER } from '@/util'
 
-// Types
-import type { Ref } from 'vue'
-
-export function useTeleport (target: Ref<boolean | string | Element>) {
+export function useTeleport (target: () => (boolean | string | ParentNode)) {
   const teleportTarget = computed(() => {
-    const _target = target.value
+    const _target = target()
 
     if (_target === true || !IN_BROWSER) return undefined