diff --git a/packages/runtime-core/__tests__/components/Teleport.spec.ts b/packages/runtime-core/__tests__/components/Teleport.spec.ts
index 15afa6db2e7..2307932ed6b 100644
--- a/packages/runtime-core/__tests__/components/Teleport.spec.ts
+++ b/packages/runtime-core/__tests__/components/Teleport.spec.ts
@@ -128,19 +128,23 @@ describe('renderer: teleport', () => {
const target = nodeOps.createElement('div')
const root = nodeOps.createElement('div')
- render(
- h(() => [
- h(Teleport, { to: target }, h('div', 'teleported')),
- h('div', 'root')
- ]),
- root
- )
- expect(serializeInner(target)).toMatchInlineSnapshot(
- `"
teleported
"`
- )
+ function testUnmount(props: any) {
+ render(
+ h(() => [h(Teleport, props, h('div', 'teleported')), h('div', 'root')]),
+ root
+ )
+ expect(serializeInner(target)).toMatchInlineSnapshot(
+ props.disabled ? `""` : `"teleported
"`
+ )
+
+ render(null, root)
+ expect(serializeInner(target)).toBe('')
+ expect(target.children.length).toBe(0)
+ }
- render(null, root)
- expect(serializeInner(target)).toBe('')
+ testUnmount({ to: target, disabled: false })
+ testUnmount({ to: target, disabled: true })
+ testUnmount({ to: null, disabled: true })
})
test('multiple teleport with same target', () => {
diff --git a/packages/runtime-core/src/components/Teleport.ts b/packages/runtime-core/src/components/Teleport.ts
index e75455f96f0..7bbad77fbf0 100644
--- a/packages/runtime-core/src/components/Teleport.ts
+++ b/packages/runtime-core/src/components/Teleport.ts
@@ -218,13 +218,22 @@ export const TeleportImpl = {
remove(
vnode: VNode,
- { r: remove, o: { remove: hostRemove } }: RendererInternals
+ { r: remove, o: { remove: hostRemove } }: RendererInternals,
+ doRemove: Boolean
) {
- const { shapeFlag, children, anchor } = vnode
- hostRemove(anchor!)
- if (shapeFlag & ShapeFlags.ARRAY_CHILDREN) {
- for (let i = 0; i < (children as VNode[]).length; i++) {
- remove((children as VNode[])[i])
+ const { shapeFlag, children, anchor, targetAnchor, target, props } = vnode
+
+ if (target) {
+ hostRemove(targetAnchor!)
+ }
+
+ // an unmounted teleport should always remove its children if not disabled
+ if (doRemove || !isTeleportDisabled(props)) {
+ hostRemove(anchor!)
+ if (shapeFlag & ShapeFlags.ARRAY_CHILDREN) {
+ for (let i = 0; i < (children as VNode[]).length; i++) {
+ remove((children as VNode[])[i])
+ }
}
}
},
diff --git a/packages/runtime-core/src/renderer.ts b/packages/runtime-core/src/renderer.ts
index f2a35794c37..e12d0242fc8 100644
--- a/packages/runtime-core/src/renderer.ts
+++ b/packages/runtime-core/src/renderer.ts
@@ -57,11 +57,7 @@ import {
queueEffectWithSuspense,
SuspenseImpl
} from './components/Suspense'
-import {
- isTeleportDisabled,
- TeleportImpl,
- TeleportVNode
-} from './components/Teleport'
+import { TeleportImpl, TeleportVNode } from './components/Teleport'
import { isKeepAlive, KeepAliveContext } from './components/KeepAlive'
import { registerHMR, unregisterHMR, isHmrUpdating } from './hmr'
import {
@@ -2111,12 +2107,8 @@ function baseCreateRenderer(
unmountChildren(children as VNode[], parentComponent, parentSuspense)
}
- // an unmounted teleport should always remove its children if not disabled
- if (
- shapeFlag & ShapeFlags.TELEPORT &&
- (doRemove || !isTeleportDisabled(vnode.props))
- ) {
- ;(vnode.type as typeof TeleportImpl).remove(vnode, internals)
+ if (shapeFlag & ShapeFlags.TELEPORT) {
+ ;(vnode.type as typeof TeleportImpl).remove(vnode, internals, doRemove)
}
if (doRemove) {