polish(teleport): do not warn missing target when teleport is disabled (#2021)

diff --git a/packages/runtime-core/__tests__/components/Teleport.spec.ts b/packages/runtime-core/__tests__/components/Teleport.spec.ts
index 44a08c6687ff0797a4e2169b19f69e5dd974a36f..eb8ee41635149f745a84c4962e734b19ce8fe707 100644 (file)
--- a/packages/runtime-core/__tests__/components/Teleport.spec.ts
+++ b/packages/runtime-core/__tests__/components/Teleport.spec.ts
@@ -179,6 +179,36 @@ describe('renderer: teleport', () => {
     )
   })
 
+  test('should work when using template ref as target', async () => {
+    const root = nodeOps.createElement('div')
+    const target = ref(null)
+    const disabled = ref(true)
+
+    const App = {
+      setup() {
+        return () =>
+          h(Fragment, [
+            h('div', { ref: target }),
+            h(
+              Teleport,
+              { to: target.value, disabled: disabled.value },
+              h('div', 'teleported')
+            )
+          ])
+      }
+    }
+    render(h(App), root)
+    expect(serializeInner(root)).toMatchInlineSnapshot(
+      `"<div></div><!--teleport start--><div>teleported</div><!--teleport end-->"`
+    )
+
+    disabled.value = false
+    await nextTick()
+    expect(serializeInner(root)).toMatchInlineSnapshot(
+      `"<div><div>teleported</div></div><!--teleport start--><!--teleport end-->"`
+    )
+  })
+
   test('disabled', () => {
     const target = nodeOps.createElement('div')
     const root = nodeOps.createElement('div')

diff --git a/packages/runtime-core/src/components/Teleport.ts b/packages/runtime-core/src/components/Teleport.ts
index 1d6a996de0ef0b092be96c958cb61d844c8233a0..dae83eea6178e092c84be02a430d2778ca6b0567 100644 (file)
--- a/packages/runtime-core/src/components/Teleport.ts
+++ b/packages/runtime-core/src/components/Teleport.ts
@@ -14,7 +14,7 @@ import { warn } from '../warning'
 export type TeleportVNode = VNode<RendererNode, RendererElement, TeleportProps>
 
 export interface TeleportProps {
-  to: string | RendererElement
+  to: string | RendererElement | null | undefined
   disabled?: boolean
 }
 
@@ -50,7 +50,7 @@ const resolveTarget = <T = RendererElement>(
       return target as any
     }
   } else {
-    if (__DEV__ && !targetSelector) {
+    if (__DEV__ && !targetSelector && !isTeleportDisabled(props)) {
       warn(`Invalid Teleport target: ${targetSelector}`)
     }
     return targetSelector as any
@@ -94,7 +94,7 @@ export const TeleportImpl = {
       const targetAnchor = (n2.targetAnchor = createText(''))
       if (target) {
         insert(targetAnchor, target)
-      } else if (__DEV__) {
+      } else if (__DEV__ && !disabled) {
         warn('Invalid Teleport target on mount:', target, `(${typeof target})`)
       }