Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(runtime-dom): fix anchor loss caused by unmount #9134

Closed
Closed
40 changes: 40 additions & 0 deletions packages/runtime-core/__tests__/components/Teleport.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -553,4 +553,44 @@ describe('renderer: teleport', () => {
`"<div>teleported</div>"`
)
})

// #9071
test('should render within the target element unique child element', async () => {
const root = document.createElement('div')

const show = ref(false)

const App = defineComponent({
setup() {
return () => {
return show.value
? h(Teleport, { to: root }, h('div', 'Teleported'))
: h('div', 'foo')
}
}
})

domRender(h(App), root)

expect(root.innerHTML).toMatchInlineSnapshot('"<div>foo</div>"')

show.value = true
await nextTick()

expect(root.innerHTML).toMatchInlineSnapshot(
'"<!--teleport start--><!--teleport end--><div>Teleported</div>"'
)

show.value = false
await nextTick()

expect(root.innerHTML).toMatchInlineSnapshot('"<div>foo</div>"')

show.value = true
await nextTick()

expect(root.innerHTML).toMatchInlineSnapshot(
'"<!--teleport start--><!--teleport end--><div>Teleported</div>"'
)
})
})
4 changes: 3 additions & 1 deletion packages/runtime-dom/src/nodeOps.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,9 @@ const templateContainer = doc && /*#__PURE__*/ doc.createElement('template')

export const nodeOps: Omit<RendererOptions<Node, Element>, 'patchProp'> = {
insert: (child, parent, anchor) => {
parent.insertBefore(child, anchor || null)
// #9071
anchor = anchor && anchor.parentNode === parent ? anchor : null
parent.insertBefore(child, anchor)
},

remove: child => {
Expand Down