fix(Suspense): switch suspense cause error in the Keepalive (fix: #6416)

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

@@ -12,7 +12,8 @@ import {
   watchEffect,
   onUnmounted,
   onErrorCaptured,
-  shallowRef
+  shallowRef,
+  KeepAlive
 } from '@vue/runtime-test'
 import { createApp } from 'vue'
 
@@ -1253,4 +1254,54 @@ describe('Suspense', () => {
       `A component with async setup() must be nested in a <Suspense>`
     ).toHaveBeenWarned()
   })
+
+  // #6416
+
+  test('test keepalive with suspense', async () => {
+    const Async = defineAsyncComponent({
+      render() {
+        return h('div', 'async')
+      }
+    })
+    const sync = {
+      render() {
+        return h('div', 'sync')
+      }
+    }
+    const components = [Async, sync]
+    const viewRef = ref(0)
+    const root = nodeOps.createElement('div')
+    const App = {
+      render() {
+        return h(KeepAlive, null, {
+          default: () => {
+            return h(Suspense, null, {
+              default: h(components[viewRef.value]),
+              fallback: h('div', 'Loading-dynamic-components')
+            })
+          }
+        })
+      }
+    }
+    render(h(App), root)
+    expect(serializeInner(root)).toBe(`<div>Loading-dynamic-components</div>`)
+
+    viewRef.value = 1
+    await nextTick()
+    expect(serializeInner(root)).toBe(`<div>sync</div>`)
+
+    viewRef.value = 0
+    await nextTick()
+
+    expect(serializeInner(root)).toBe('<!---->')
+
+    await Promise.all(deps)
+    await nextTick()
+    // when async resolve,it should be <div>async</div>
+    expect(serializeInner(root)).toBe('<div>async</div>')
+
+    viewRef.value = 1
+    await nextTick() //TypeError: Cannot read properties of null (reading 'parentNode'),This has been fixed
+    expect(serializeInner(root)).toBe(`<div>sync</div>`) 
+  })
 })

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

@@ -321,7 +321,7 @@ function patchSuspense(
       triggerEvent(n2, 'onPending')
       // mount pending branch in off-dom container
       suspense.pendingBranch = newBranch
-      suspense.pendingId++
+      if (suspense.pendingId > 0) suspense.pendingId--
       patch(
         null,
         newBranch,
@@ -775,7 +775,8 @@ export function queueEffectWithSuspense(
 function setActiveBranch(suspense: SuspenseBoundary, branch: VNode) {
   suspense.activeBranch = branch
   const { vnode, parentComponent } = suspense
-  const el = (vnode.el = branch.el)
+  const el = branch.el
+  if (el) vnode.el = el
   // in case suspense is the root node of a component,
   // recursively update the HOC el
   if (parentComponent && parentComponent.subTree === vnode) {

packages/runtime-dom/src/nodeOps.ts

@@ -42,7 +42,7 @@ export const nodeOps: Omit<RendererOptions<Node, Element>, 'patchProp'> = {
     el.textContent = text
   },
 
-  parentNode: node => node.parentNode as Element | null,
+  parentNode: node => (node ? node.parentNode : null) as Element | null,
 
   nextSibling: node => node.nextSibling,
 

packages/runtime-test/src/nodeOps.ts

@@ -212,7 +212,7 @@ function setElementText(el: TestElement, text: string) {
 }
 
 function parentNode(node: TestNode): TestElement | null {
-  return node.parentNode
+  return node ? node.parentNode : null
 }
 
 function nextSibling(node: TestNode): TestNode | null {