fix(teleport): always inherit root DOM nodes on patch (#1836)

fix #1813

diff --git a/packages/runtime-core/src/components/Teleport.ts b/packages/runtime-core/src/components/Teleport.ts
index 8c588df128b3a99aa501773da79e5e6ed913364d..ca885c3d9206df32c0ef27f65900975896896b85 100644 (file)
--- a/packages/runtime-core/src/components/Teleport.ts
+++ b/packages/runtime-core/src/components/Teleport.ts
@@ -139,7 +139,10 @@ export const TeleportImpl = {
           parentSuspense,
           isSVG
         )
-        if (n2.patchFlag > 0 && n2.shapeFlag & ShapeFlags.ARRAY_CHILDREN) {
+        // even in block tree mode we need to make sure all root-level nodes
+        // in the teleport inherit previous DOM references so that they can
+        // be moved in future patches.
+        if (n2.shapeFlag & ShapeFlags.ARRAY_CHILDREN) {
           const oldChildren = n1.children as VNode[]
           const children = n2.children as VNode[]
           for (let i = 0; i < children.length; i++) {

diff --git a/packages/vue/__tests__/index.spec.ts b/packages/vue/__tests__/index.spec.ts
index 974fffc0442467f8d9ce8ec7341602efeb9f55b9..7339a0804fa864238a94e0f780bac76668c342b7 100644 (file)
--- a/packages/vue/__tests__/index.spec.ts
+++ b/packages/vue/__tests__/index.spec.ts
@@ -208,4 +208,43 @@ describe('compiler + runtime integration', () => {
     ).toHaveBeenWarned()
     document.querySelector = origin
   })
+
+  // #1813
+  it('should not report an error when "0" as patchFlag value', async () => {
+    const container = document.createElement('div')
+    const target = document.createElement('div')
+    const count = ref(0)
+    const origin = document.querySelector
+    document.querySelector = jest.fn().mockReturnValue(target)
+
+    const App = {
+      template: `
+      <teleport v-if="count < 2" to="#target">
+        <div>
+          <div>{{ count }}</div>
+        </div>
+      </teleport>
+      `,
+      data() {
+        return {
+          count
+        }
+      }
+    }
+    createApp(App).mount(container)
+    expect(container.innerHTML).toBe(`<!--teleport start--><!--teleport end-->`)
+    expect(target.innerHTML).toBe(`<div><div>0</div></div>`)
+
+    count.value++
+    await nextTick()
+    expect(container.innerHTML).toBe(`<!--teleport start--><!--teleport end-->`)
+    expect(target.innerHTML).toBe(`<div><div>1</div></div>`)
+
+    count.value++
+    await nextTick()
+    expect(container.innerHTML).toBe(`<!--v-if-->`)
+    expect(target.innerHTML).toBe(``)
+
+    document.querySelector = origin
+  })
 })