fix(suspense): fix more suspense patch before resolve edge cases

close #10017

Author: yyx990803

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

@@ -1692,7 +1692,7 @@ describe('Suspense', () => {
     expect(serializeInner(root)).toBe(`<div>sync</div>`)
   })
 
-  // #6416 follow up
+  // #6416 follow up / #10017
   test('Suspense patched during HOC async component re-mount', async () => {
     const key = ref('k')
     const data = ref('data')
@@ -1713,7 +1713,7 @@ describe('Suspense', () => {
     const App = {
       render() {
         return h(Suspense, null, {
-          default: h(Comp, { data: data.value }),
+          default: h(Comp, { k: key.value, data: data.value }),
         })
       },
     }

packages/runtime-core/src/componentRenderUtils.ts

@@ -428,7 +428,6 @@ export function updateHOCHostEl(
   { vnode, parent }: ComponentInternalInstance,
   el: typeof vnode.el, // HostNode
 ) {
-  if (!el) return
   while (parent) {
     const root = parent.subTree
     if (root.suspense && root.suspense.activeBranch === vnode) {

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

@@ -864,7 +864,14 @@ export function queueEffectWithSuspense(
 function setActiveBranch(suspense: SuspenseBoundary, branch: VNode) {
   suspense.activeBranch = branch
   const { vnode, parentComponent } = suspense
-  const el = (vnode.el = branch.el)
+  let el = branch.el
+  // if branch has no el after patch, it's a HOC wrapping async components
+  // drill and locate the placeholder comment node
+  while (!el && branch.component) {
+    branch = branch.component.subTree
+    el = branch.el
+  }
+  vnode.el = el
   // in case suspense is the root node of a component,
   // recursively update the HOC el
   if (parentComponent && parentComponent.subTree === vnode) {