From b67841172dc6eb6b13b2d2cdefb1dc55c8d5e094 Mon Sep 17 00:00:00 2001
From: daiwei <daiwei521@126.com>
Date: Tue, 14 Jan 2025 09:14:41 +0800
Subject: [PATCH 1/3] fix(Teleport): handle teleport unmount edge case

---
 packages/runtime-core/src/components/Teleport.ts | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/runtime-core/src/components/Teleport.ts b/packages/runtime-core/src/components/Teleport.ts
index fe6fa36c1ca..b402df37b34 100644
--- a/packages/runtime-core/src/components/Teleport.ts
+++ b/packages/runtime-core/src/components/Teleport.ts
@@ -316,8 +316,13 @@ export const TeleportImpl = {
 
     // an unmounted teleport should always unmount its children whether it's disabled or not
     doRemove && hostRemove(anchor!)
+
+    // skip unmount if not disabled & target missing (children not rendered)
+    const disabled = isTeleportDisabled(props)
+    if (!disabled && !target) return
+
     if (shapeFlag & ShapeFlags.ARRAY_CHILDREN) {
-      const shouldRemove = doRemove || !isTeleportDisabled(props)
+      const shouldRemove = doRemove || !disabled
       for (let i = 0; i < (children as VNode[]).length; i++) {
         const child = (children as VNode[])[i]
         unmount(

From 6daa180de91385f27925d4fbb4771dbd91fa976e Mon Sep 17 00:00:00 2001
From: daiwei <daiwei521@126.com>
Date: Tue, 14 Jan 2025 09:15:51 +0800
Subject: [PATCH 2/3] chore: minor tweaks

---
 packages/runtime-core/src/components/Teleport.ts | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/packages/runtime-core/src/components/Teleport.ts b/packages/runtime-core/src/components/Teleport.ts
index b402df37b34..7dab240e3ae 100644
--- a/packages/runtime-core/src/components/Teleport.ts
+++ b/packages/runtime-core/src/components/Teleport.ts
@@ -308,12 +308,6 @@ export const TeleportImpl = {
       target,
       props,
     } = vnode
-
-    if (target) {
-      hostRemove(targetStart!)
-      hostRemove(targetAnchor!)
-    }
-
     // an unmounted teleport should always unmount its children whether it's disabled or not
     doRemove && hostRemove(anchor!)
 
@@ -321,6 +315,11 @@ export const TeleportImpl = {
     const disabled = isTeleportDisabled(props)
     if (!disabled && !target) return
 
+    if (target) {
+      hostRemove(targetStart!)
+      hostRemove(targetAnchor!)
+    }
+
     if (shapeFlag & ShapeFlags.ARRAY_CHILDREN) {
       const shouldRemove = doRemove || !disabled
       for (let i = 0; i < (children as VNode[]).length; i++) {

From 1b12b404b04325e71aadb7846622b2ce10b56152 Mon Sep 17 00:00:00 2001
From: daiwei <daiwei521@126.com>
Date: Tue, 14 Jan 2025 09:24:31 +0800
Subject: [PATCH 3/3] test: add test case

---
 .../__tests__/components/Teleport.spec.ts     | 30 +++++++++++++++++++
 1 file changed, 30 insertions(+)

diff --git a/packages/runtime-core/__tests__/components/Teleport.spec.ts b/packages/runtime-core/__tests__/components/Teleport.spec.ts
index 79125cd04df..1cf83dd35d3 100644
--- a/packages/runtime-core/__tests__/components/Teleport.spec.ts
+++ b/packages/runtime-core/__tests__/components/Teleport.spec.ts
@@ -719,6 +719,36 @@ describe('renderer: teleport', () => {
       expect(root.innerHTML).toBe('<!--v-if-->')
     })
 
+    test('skip unmount children if teleport not disabled & target missing', async () => {
+      const root = document.createElement('div')
+      const childShow = ref(true)
+
+      const Comp = {
+        setup() {
+          return () => h(Teleport, { to: null }, [h('div', 'foo')])
+        },
+      }
+
+      const App = defineComponent({
+        setup() {
+          return () => {
+            return h(Fragment, { key: 0 }, [
+              childShow.value ? h(Comp) : createCommentVNode('v-if'),
+            ])
+          }
+        },
+      })
+
+      domRender(h(App), root)
+      expect('Invalid Teleport target: null').toHaveBeenWarned()
+      expect('Invalid Teleport target on mount').toHaveBeenWarned()
+      expect(root.innerHTML).toBe('<!--teleport start--><!--teleport end-->')
+
+      childShow.value = false
+      await nextTick()
+      expect(root.innerHTML).toBe('<!--v-if-->')
+    })
+
     test('accessing template refs inside teleport', async () => {
       const target = nodeOps.createElement('div')
       const tRef = ref()