fix(runtime-core): ensure correct anchor el for deeper unresolved async components (#14182)

close #14173

Author: linzhe141

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

@@ -2360,6 +2360,101 @@ describe('Suspense', () => {
       )
     })
 
+    // #14173
+    test('nested async components with v-for + only Suspense and async component wrappers', async () => {
+      const CompAsyncSetup = defineAsyncComponent({
+        props: ['item', 'id'],
+        render(ctx: any) {
+          return h('div', ctx.id + '-' + ctx.item.name)
+        },
+      })
+      const items = ref([
+        { id: 1, name: 'a' },
+        { id: 2, name: 'b' },
+        { id: 3, name: 'c' },
+      ])
+      const Comp = {
+        props: ['id'],
+        setup(props: any) {
+          return () =>
+            h(Suspense, null, {
+              default: () =>
+                h(
+                  Fragment,
+                  null,
+                  items.value.map(item =>
+                    h(CompAsyncSetup, {
+                      item,
+                      key: item.id,
+                      id: props.id,
+                    }),
+                  ),
+                ),
+            })
+        },
+      }
+
+      const CompAsyncWrapper = defineAsyncComponent({
+        props: ['id'],
+        render(ctx: any) {
+          return h(Comp, { id: ctx.id })
+        },
+      })
+      const CompWrapper = defineComponent({
+        props: ['id'],
+        render(ctx: any) {
+          return h(CompAsyncWrapper, { id: ctx.id })
+        },
+      })
+      const list = ref([{ id: 1 }, { id: 2 }, { id: 3 }])
+
+      const App = {
+        setup() {
+          return () =>
+            h(Suspense, null, {
+              default: () =>
+                h(
+                  Fragment,
+                  null,
+                  list.value.map(item =>
+                    h(CompWrapper, { id: item.id, key: item.id }),
+                  ),
+                ),
+            })
+        },
+      }
+
+      const root = nodeOps.createElement('div')
+      render(h(App), root)
+      await nextTick()
+      await Promise.all(deps)
+      await Promise.all(deps)
+
+      expect(serializeInner(root)).toBe(
+        `<div>1-a</div><div>1-b</div><div>1-c</div><div>2-a</div><div>2-b</div><div>2-c</div><div>3-a</div><div>3-b</div><div>3-c</div>`,
+      )
+
+      list.value = [{ id: 4 }, { id: 5 }, { id: 6 }]
+      await nextTick()
+      await Promise.all(deps)
+      await Promise.all(deps)
+      expect(serializeInner(root)).toBe(
+        `<div>4-a</div><div>4-b</div><div>4-c</div><div>5-a</div><div>5-b</div><div>5-c</div><div>6-a</div><div>6-b</div><div>6-c</div>`,
+      )
+
+      items.value = [
+        { id: 4, name: 'd' },
+        { id: 5, name: 'f' },
+        { id: 6, name: 'g' },
+      ]
+      await nextTick()
+      await Promise.all(deps)
+      await Promise.all(deps)
+      expect(serializeInner(root)).toBe(
+        `<div>4-d</div><div>4-f</div><div>4-g</div><div>5-d</div><div>5-f</div><div>5-g</div><div>6-d</div><div>6-f</div><div>6-g</div>`,
+      )
+    })
+
     test('should call unmounted directive once when fallback is replaced by resolved async component', async () => {
       const Comp = {
         render() {

packages/runtime-core/src/renderer.ts

@@ -1995,8 +1995,8 @@ function baseCreateRenderer(
         const anchorVNode = c2[nextIndex + 1] as VNode
         const anchor =
           nextIndex + 1 < l2
-            ? // #13559, fallback to el placeholder for unresolved async component
-              anchorVNode.el || anchorVNode.placeholder
+            ? // #13559, #14173 fallback to el placeholder for unresolved async component
+              anchorVNode.el || resolveAsyncComponentPlaceholder(anchorVNode)
             : parentAnchor
         if (newIndexToOldIndexMap[i] === 0) {
           // mount new
@@ -2577,3 +2577,17 @@ export function invalidateMount(hooks: LifecycleHook): void {
       hooks[i].flags! |= SchedulerJobFlags.DISPOSED
   }
 }
+
+function resolveAsyncComponentPlaceholder(anchorVnode: VNode) {
+  if (anchorVnode.placeholder) {
+    return anchorVnode.placeholder
+  }
+
+  // anchor vnode maybe is a wrapper component has single unresolved async component
+  const instance = anchorVnode.component
+  if (instance) {
+    return resolveAsyncComponentPlaceholder(instance.subTree)
+  }
+
+  return null
+}