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 {