fix(Transition): ensure the KeepAlive children unmount w/ out-in mode (#10632)

close #10620

diff --git a/packages/runtime-core/__tests__/components/BaseTransition.spec.ts b/packages/runtime-core/__tests__/components/BaseTransition.spec.ts
index 7c389fe1ededdf0e7b1fd9351912bcbe8ccae958..3184c9c9c6a8a5741a370c1ea39816cd9f073dc7 100644 (file)
--- a/packages/runtime-core/__tests__/components/BaseTransition.spec.ts
+++ b/packages/runtime-core/__tests__/components/BaseTransition.spec.ts
@@ -7,6 +7,7 @@ import {
   h,
   nextTick,
   nodeOps,
+  onUnmounted,
   ref,
   render,
   serialize,
@@ -768,6 +769,42 @@ describe('BaseTransition', () => {
     test('w/ KeepAlive', async () => {
       await runTestWithKeepAlive(testOutIn)
     })
+
+    test('w/ KeepAlive + unmount innerChild', async () => {
+      const unmountSpy = vi.fn()
+      const includeRef = ref(['TrueBranch'])
+      const trueComp = {
+        name: 'TrueBranch',
+        setup() {
+          onUnmounted(unmountSpy)
+          const count = ref(0)
+          return () => h('div', count.value)
+        },
+      }
+
+      const toggle = ref(true)
+      const { props } = mockProps({ mode: 'out-in' }, true /*withKeepAlive*/)
+      const root = nodeOps.createElement('div')
+      const App = {
+        render() {
+          return h(BaseTransition, props, () => {
+            return h(
+              KeepAlive,
+              { include: includeRef.value },
+              toggle.value ? h(trueComp) : h('div'),
+            )
+          })
+        },
+      }
+      render(h(App), root)
+
+      // trigger toggle
+      toggle.value = false
+      includeRef.value = []
+
+      await nextTick()
+      expect(unmountSpy).toHaveBeenCalledTimes(1)
+    })
   })
 
   // #6835

diff --git a/packages/runtime-core/src/components/KeepAlive.ts b/packages/runtime-core/src/components/KeepAlive.ts
index db6088cf5c622bf9fcea76921249734e09536dbf..7697096bcd7ae055d6057cabc3174f5b8244da74 100644 (file)
--- a/packages/runtime-core/src/components/KeepAlive.ts
+++ b/packages/runtime-core/src/components/KeepAlive.ts
@@ -254,7 +254,7 @@ const KeepAliveImpl: ComponentOptions = {
       pendingCacheKey = null
 
       if (!slots.default) {
-        return null
+        return (current = null)
       }
 
       const children = slots.default()