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) {