Skip to content

Commit 343c891

Browse files
fix(transition): fix KeepAlive with transition out-in mode behavior in production (#12468)
close #12465
1 parent 9c4dbbc commit 343c891

File tree

2 files changed

+49
-3
lines changed

2 files changed

+49
-3
lines changed

packages/runtime-core/__tests__/components/BaseTransition.spec.ts

+47
Original file line numberDiff line numberDiff line change
@@ -1198,4 +1198,51 @@ describe('BaseTransition', () => {
11981198
test('should not error on KeepAlive w/ function children', () => {
11991199
expect(() => mount({}, () => () => h('div'), true)).not.toThrow()
12001200
})
1201+
1202+
// #12465
1203+
test('mode: "out-in" w/ KeepAlive + fallthrough attrs (prod mode)', async () => {
1204+
__DEV__ = false
1205+
async function testOutIn({ trueBranch, falseBranch }: ToggleOptions) {
1206+
const toggle = ref(true)
1207+
const { props, cbs } = mockProps({ mode: 'out-in' }, true)
1208+
const root = nodeOps.createElement('div')
1209+
const App = {
1210+
render() {
1211+
return h(
1212+
BaseTransition,
1213+
{
1214+
...props,
1215+
class: 'test',
1216+
},
1217+
() =>
1218+
h(KeepAlive, null, toggle.value ? trueBranch() : falseBranch()),
1219+
)
1220+
},
1221+
}
1222+
render(h(App), root)
1223+
1224+
expect(serializeInner(root)).toBe(`<div class="test">0</div>`)
1225+
1226+
// trigger toggle
1227+
toggle.value = false
1228+
await nextTick()
1229+
expect(props.onBeforeLeave).toHaveBeenCalledTimes(1)
1230+
expect(serialize((props.onBeforeLeave as any).mock.calls[0][0])).toBe(
1231+
`<div class="test">0</div>`,
1232+
)
1233+
expect(props.onLeave).toHaveBeenCalledTimes(1)
1234+
expect(serialize((props.onLeave as any).mock.calls[0][0])).toBe(
1235+
`<div class="test">0</div>`,
1236+
)
1237+
expect(props.onAfterLeave).not.toHaveBeenCalled()
1238+
// enter should not have started
1239+
expect(props.onBeforeEnter).not.toHaveBeenCalled()
1240+
expect(props.onEnter).not.toHaveBeenCalled()
1241+
expect(props.onAfterEnter).not.toHaveBeenCalled()
1242+
cbs.doneLeave[`<div class="test">0</div>`]()
1243+
expect(serializeInner(root)).toBe(`<span class="test">0</span>`)
1244+
}
1245+
await runTestWithKeepAlive(testOutIn)
1246+
__DEV__ = true
1247+
})
12011248
})

packages/runtime-core/src/components/BaseTransition.ts

+2-3
Original file line numberDiff line numberDiff line change
@@ -501,9 +501,8 @@ function getInnerChild(vnode: VNode): VNode | undefined {
501501

502502
return vnode
503503
}
504-
// #7121 ensure get the child component subtree in case
505-
// it's been replaced during HMR
506-
if (__DEV__ && vnode.component) {
504+
// #7121,#12465 get the component subtree if it's been mounted
505+
if (vnode.component) {
507506
return vnode.component.subTree
508507
}
509508

0 commit comments

Comments
 (0)