fix(runtime-core/teleport): ensure the nested teleport can be unmount…

…ed correctly (#3629) fix #3623
vuejs · May 26, 2021 · 4e3f82f · 4e3f82f
1 parent 2010607
commit 4e3f82f
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 2 deletions.
diff --git a/packages/runtime-core/__tests__/rendererOptimizedMode.spec.ts b/packages/runtime-core/__tests__/rendererOptimizedMode.spec.ts
@@ -1,6 +1,7 @@
 import {
   h,
   Fragment,
+  Teleport,
   createVNode,
   createCommentVNode,
   openBlock,
@@ -578,6 +579,47 @@ describe('renderer: optimized mode', () => {
     expect(inner(root)).toBe('<div>World</div>')
   })
 
+  //#3623
+  test('nested teleport unmount need exit the optimization mode', () => {
+    const target = nodeOps.createElement('div')
+    const root = nodeOps.createElement('div')
+
+    render(
+      (openBlock(),
+      createBlock('div', null, [
+        (openBlock(),
+        createBlock(
+          Teleport as any,
+          {
+            to: target
+          },
+          [
+            createVNode('div', null, [
+              (openBlock(),
+              createBlock(
+                Teleport as any,
+                {
+                  to: target
+                },
+                [createVNode('div', null, 'foo')]
+              ))
+            ])
+          ]
+        ))
+      ])),
+      root
+    )
+    expect(inner(target)).toMatchInlineSnapshot(
+      `"<div><!--teleport start--><!--teleport end--></div><div>foo</div>"`
+    )
+    expect(inner(root)).toMatchInlineSnapshot(
+      `"<div><!--teleport start--><!--teleport end--></div>"`
+    )
+
+    render(null, root)
+    expect(inner(target)).toBe('')
+  })
+
   // #3548
   test('should not track dynamic children when the user calls a compiled slot inside template expression', () => {
     const Comp = {

diff --git a/packages/runtime-core/src/components/Teleport.ts b/packages/runtime-core/src/components/Teleport.ts
@@ -243,12 +243,13 @@ export const TeleportImpl = {
       hostRemove(anchor!)
       if (shapeFlag & ShapeFlags.ARRAY_CHILDREN) {
         for (let i = 0; i < (children as VNode[]).length; i++) {
+          const child = (children as VNode[])[i]
           unmount(
-            (children as VNode[])[i],
+            child,
             parentComponent,
             parentSuspense,
             true,
-            optimized
+            !!child.dynamicChildren
           )
         }
       }