Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
fix(transition): fix broken leave transition on dev root fragment (#5268
)
  • Loading branch information
edison1105 committed Apr 14, 2022
1 parent 71c9536 commit 767d212
Show file tree
Hide file tree
Showing 2 changed files with 88 additions and 4 deletions.
18 changes: 17 additions & 1 deletion packages/runtime-core/src/renderer.ts
Expand Up @@ -2159,7 +2159,23 @@ function baseCreateRenderer(
const remove: RemoveFn = vnode => {
const { type, el, anchor, transition } = vnode
if (type === Fragment) {
removeFragment(el!, anchor!)
if (
__DEV__ &&
vnode.patchFlag > 0 &&
vnode.patchFlag & PatchFlags.DEV_ROOT_FRAGMENT &&
transition &&
!transition.persisted
) {
;(vnode.children as VNode[]).forEach(child => {
if (child.type === Comment) {
hostRemove(child.el!)
} else {
remove(child)
}
})
} else {
removeFragment(el!, anchor!)
}
return
}

Expand Down
74 changes: 71 additions & 3 deletions packages/vue/__tests__/Transition.spec.ts
Expand Up @@ -1979,9 +1979,7 @@ describe('e2e: Transition', () => {
</div>
`
}).mount(document.createElement('div'))
expect(
`invalid <transition> mode: none`
).toHaveBeenWarned()
expect(`invalid <transition> mode: none`).toHaveBeenWarned()
})

// #3227
Expand Down Expand Up @@ -2023,4 +2021,74 @@ describe('e2e: Transition', () => {
expect(outerSpy).toHaveBeenCalledTimes(1)
expect(root.innerHTML).toBe(`<!---->`)
})

test(
'should work with dev root fragment',
async () => {
await page().evaluate(() => {
const { createApp, ref } = (window as any).Vue
createApp({
components: {
Comp: {
template: `
<!-- Broken! -->
<div><slot /></div>
`
}
},
template: `
<div id="container">
<transition>
<Comp class="test" v-if="toggle">
<div>content</div>
</Comp>
</transition>
</div>
<button id="toggleBtn" @click="click">button</button>
`,
setup: () => {
const toggle = ref(true)
const click = () => (toggle.value = !toggle.value)
return { toggle, click }
}
}).mount('#app')
})
expect(await html('#container')).toBe(
'<!-- Broken! --><div class="test"><div>content</div></div>'
)

// leave
expect(await classWhenTransitionStart()).toStrictEqual([
'test',
'v-leave-from',
'v-leave-active'
])
await nextFrame()
expect(await classList('.test')).toStrictEqual([
'test',
'v-leave-active',
'v-leave-to'
])
await transitionFinish()
expect(await html('#container')).toBe('<!--v-if-->')

// enter
expect(await classWhenTransitionStart()).toStrictEqual([
'test',
'v-enter-from',
'v-enter-active'
])
await nextFrame()
expect(await classList('.test')).toStrictEqual([
'test',
'v-enter-active',
'v-enter-to'
])
await transitionFinish()
expect(await html('#container')).toBe(
'<!-- Broken! --><div class="test"><div>content</div></div>'
)
},
E2E_TIMEOUT
)
})

0 comments on commit 767d212

Please sign in to comment.