diff --git a/packages/runtime-core/__tests__/components/Suspense.spec.ts b/packages/runtime-core/__tests__/components/Suspense.spec.ts
index 203937aa5..7c3f8ff8b 100644
--- a/packages/runtime-core/__tests__/components/Suspense.spec.ts
+++ b/packages/runtime-core/__tests__/components/Suspense.spec.ts
@@ -1692,7 +1692,7 @@ describe('Suspense', () => {
expect(serializeInner(root)).toBe(`
sync
`)
})
- // #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 }),
})
},
}
diff --git a/packages/runtime-core/src/componentRenderUtils.ts b/packages/runtime-core/src/componentRenderUtils.ts
index e07a31ee2..4cb29180e 100644
--- a/packages/runtime-core/src/componentRenderUtils.ts
+++ b/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) {
diff --git a/packages/runtime-core/src/components/Suspense.ts b/packages/runtime-core/src/components/Suspense.ts
index 8d6ee1641..ac023ae60 100644
--- a/packages/runtime-core/src/components/Suspense.ts
+++ b/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) {