From ec73e6fc4bb82368f4cd0ef813234af23a66f122 Mon Sep 17 00:00:00 2001
From: Kael <kaelwd@gmail.com>
Date: Wed, 3 Jul 2024 18:16:09 +1000
Subject: [PATCH] fix(VOverlay): correct ShadowRoot attach condition

fixes #20001
fixes #20086
---
 packages/vuetify/src/components/VOverlay/VOverlay.tsx | 10 +++++++---
 packages/vuetify/src/composables/teleport.ts          |  7 ++-----
 2 files changed, 9 insertions(+), 8 deletions(-)

diff --git a/packages/vuetify/src/components/VOverlay/VOverlay.tsx b/packages/vuetify/src/components/VOverlay/VOverlay.tsx
index 70cedce4870..14ec2c1fcae 100644
--- 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
index a0fdf7581b7..f90000277a5 100644
--- 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