diff --git a/packages/runtime-core/__tests__/components/Teleport.spec.ts b/packages/runtime-core/__tests__/components/Teleport.spec.ts
index 57180ea139d..7371f53f7b6 100644
--- a/packages/runtime-core/__tests__/components/Teleport.spec.ts
+++ b/packages/runtime-core/__tests__/components/Teleport.spec.ts
@@ -475,4 +475,57 @@ describe('renderer: teleport', () => {
expect(dir.mounted).toHaveBeenCalledTimes(1)
expect(dir.unmounted).toHaveBeenCalledTimes(1)
})
+
+ // #7835
+ test(`ensure that target changes when disabled are updated correctly when enabled`, async () => {
+ const root = nodeOps.createElement('div')
+ const target1 = nodeOps.createElement('div')
+ const target2 = nodeOps.createElement('div')
+ const target3 = nodeOps.createElement('div')
+ const target = ref(target1)
+ const disabled = ref(true)
+
+ const App = {
+ setup() {
+ return () =>
+ h(Fragment, [
+ h(
+ Teleport,
+ { to: target.value, disabled: disabled.value },
+ h('div', 'teleported')
+ )
+ ])
+ }
+ }
+ render(h(App), root)
+ disabled.value = false
+ await nextTick()
+ expect(serializeInner(target1)).toMatchInlineSnapshot(
+ `"
teleported
"`
+ )
+ expect(serializeInner(target2)).toMatchInlineSnapshot(`""`)
+ expect(serializeInner(target3)).toMatchInlineSnapshot(`""`)
+
+ disabled.value = true
+ await nextTick()
+ target.value = target2
+ await nextTick()
+ expect(serializeInner(target1)).toMatchInlineSnapshot(`""`)
+ expect(serializeInner(target2)).toMatchInlineSnapshot(`""`)
+ expect(serializeInner(target3)).toMatchInlineSnapshot(`""`)
+
+ target.value = target3
+ await nextTick()
+ expect(serializeInner(target1)).toMatchInlineSnapshot(`""`)
+ expect(serializeInner(target2)).toMatchInlineSnapshot(`""`)
+ expect(serializeInner(target3)).toMatchInlineSnapshot(`""`)
+
+ disabled.value = false
+ await nextTick()
+ expect(serializeInner(target1)).toMatchInlineSnapshot(`""`)
+ expect(serializeInner(target2)).toMatchInlineSnapshot(`""`)
+ expect(serializeInner(target3)).toMatchInlineSnapshot(
+ `"teleported
"`
+ )
+ })
})
diff --git a/packages/runtime-core/src/components/Teleport.ts b/packages/runtime-core/src/components/Teleport.ts
index 6e66d0444f9..4f7d16bc7d1 100644
--- a/packages/runtime-core/src/components/Teleport.ts
+++ b/packages/runtime-core/src/components/Teleport.ts
@@ -186,6 +186,13 @@ export const TeleportImpl = {
internals,
TeleportMoveTypes.TOGGLE
)
+ } else {
+ // #7835
+ // When `teleport` is disabled, `to` may change, making it always old,
+ // to ensure the correct `to` when enabled
+ if (n2.props && n1.props && n2.props.to !== n1.props.to) {
+ n2.props.to = n1.props.to
+ }
}
} else {
// target changed