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.

Sign up for GitHub

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

Jump to bottom

fix(teleport): ensure descendent component would be unmounted correctly #6529

Merged
merged 3 commits into from
Oct 20, 2023
Merged

fix(teleport): ensure descendent component would be unmounted correctly #6529

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2ef016b
fix(teleport): ensure descendent component would be unmounted correctly
nhpupu Aug 22, 2022
95ef93e
Merge branch 'main' into fix/6347
haoqunjiang Sep 19, 2023
1c03f71
test: replace jest.fn with vi.fn
haoqunjiang Sep 19, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 25 additions & 0 deletions packages/runtime-core/__tests__/components/Teleport.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -168,6 +168,31 @@ describe('renderer: teleport', () => {
expect(serializeInner(target)).toBe('')
})

// #6347
test('descendent component should be unmounted when teleport is disabled and unmounted', () => {
const root = nodeOps.createElement('div')

const CompWithHook = {
render() {
return [h('p'), h('p')]
},
beforeUnmount: jest.fn(),
unmounted: jest.fn()
}

render(
h(() => [h(Teleport, { to: null, disabled: true }, h(CompWithHook))]),
root
)
expect(CompWithHook.beforeUnmount).toBeCalledTimes(0)
expect(CompWithHook.unmounted).toBeCalledTimes(0)

render(null, root)

expect(CompWithHook.beforeUnmount).toBeCalledTimes(1)
expect(CompWithHook.unmounted).toBeCalledTimes(1)
})

test('multiple teleport with same target', () => {
const target = nodeOps.createElement('div')
const root = nodeOps.createElement('div')
Expand Down
29 changes: 14 additions & 15 deletions packages/runtime-core/src/components/Teleport.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -230,28 +230,27 @@ export const TeleportImpl = {
parentSuspense: SuspenseBoundary | null,
optimized: boolean,
{ um: unmount, o: { remove: hostRemove } }: RendererInternals,
doRemove: Boolean
doRemove: boolean
) {
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++) {
const child = (children as VNode[])[i]
unmount(
child,
parentComponent,
parentSuspense,
true,
!!child.dynamicChildren
)
}
// an unmounted teleport should always unmount its children whether it's disabled or not
Copy link
Member

@edison1105 edison1105 Aug 23, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this will be a breaking change.
misunderstood.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The original comment was added in #2870. And it refered to remove but not unmount.
When it comes to remove, there is indeed no need to remove its children when it's disabled and doRmove is false.
But unmount is not equal to remove. We can unmount a child without remove it, by making doRemove false.

While unmounting a component, we should also unmount its children. If not, its children would never be unmounted, and will cause the bug this pr fixes.

doRemove && hostRemove(anchor!)
if (shapeFlag & ShapeFlags.ARRAY_CHILDREN) {
const shouldRemove = doRemove || !isTeleportDisabled(props)
for (let i = 0; i < (children as VNode[]).length; i++) {
const child = (children as VNode[])[i]
unmount(
child,
parentComponent,
parentSuspense,
shouldRemove,
!!child.dynamicChildren
)
}
}
},
Expand Down