Merge 9f1d198a4b into 56be3dd4db

packages/runtime-core/__tests__/hydration.spec.ts

@@ -2185,6 +2185,30 @@ describe('SSR hydration', () => {
       expect(`Hydration style mismatch`).not.toHaveBeenWarned()
     })
 
+    test('with disabled teleport + undefined target', async () => {
+      const container = document.createElement('div')
+      const isOpen = ref(false)
+      const App = {
+        setup() {
+          return { isOpen }
+        },
+        template: `
+          <Teleport :to="undefined" :disabled="true">
+            <div v-if="isOpen">
+              Menu is open...
+            </div>
+          </Teleport>`,
+      }
+      container.innerHTML = await renderToString(h(App))
+      const app = createSSRApp(App)
+      app.mount(container)
+      isOpen.value = true
+      await nextTick()
+      expect(container.innerHTML).toBe(
+        `<!--teleport start--><div> Menu is open... </div><!--teleport end-->`,
+      )
+    })
+
     test('escape css var name', () => {
       const container = document.createElement('div')
       container.innerHTML = `<div style="padding: 4px;--foo\\.bar:red;"></div>`

packages/runtime-core/src/components/Teleport.ts

@@ -406,18 +406,12 @@ function hydrateTeleport(
     optimized: boolean,
   ) => Node | null,
 ): Node | null {
-  const target = (vnode.target = resolveTarget<Element>(
+  function hydrateDisabledTeleport(
-    vnode.props,
+    node: Node,
-    querySelector,
+    vnode: VNode,
-  ))
+    targetStart: Node | null,
-  if (target) {
+    targetAnchor: Node | null,
-    const disabled = isTeleportDisabled(vnode.props)
+  ) {
-    // if multiple teleports rendered to the same target element, we need to
-    // pick up from where the last teleport finished instead of the first node
-    const targetNode =
-      (target as TeleportTargetElement)._lpa || target.firstChild
-    if (vnode.shapeFlag & ShapeFlags.ARRAY_CHILDREN) {
-      if (disabled) {
     vnode.anchor = hydrateChildren(
       nextSibling(node),
       vnode,
@@ -427,8 +421,28 @@ function hydrateTeleport(
       slotScopeIds,
       optimized,
     )
-        vnode.targetStart = targetNode
+    vnode.targetStart = targetStart
-        vnode.targetAnchor = targetNode && nextSibling(targetNode)
+    vnode.targetAnchor = targetAnchor
+  }
+
+  const target = (vnode.target = resolveTarget<Element>(
+    vnode.props,
+    querySelector,
+  ))
+  const disabled = isTeleportDisabled(vnode.props)
+  if (target) {
+    // if multiple teleports rendered to the same target element, we need to
+    // pick up from where the last teleport finished instead of the first node
+    const targetNode =
+      (target as TeleportTargetElement)._lpa || target.firstChild
+    if (vnode.shapeFlag & ShapeFlags.ARRAY_CHILDREN) {
+      if (disabled) {
+        hydrateDisabledTeleport(
+          node,
+          vnode,
+          targetNode,
+          targetNode && nextSibling(targetNode),
+        )
       } else {
         vnode.anchor = nextSibling(node)
 
@@ -470,6 +484,10 @@ function hydrateTeleport(
       }
     }
     updateCssVars(vnode, disabled)
+  } else if (disabled) {
+    if (vnode.shapeFlag & ShapeFlags.ARRAY_CHILDREN) {
+      hydrateDisabledTeleport(node, vnode, node, nextSibling(node))
+    }
   }
   return vnode.anchor && nextSibling(vnode.anchor as Node)
 }