From f5a1d1bbba2e0cd10b5892a24617a11795859bff Mon Sep 17 00:00:00 2001
From: Janry <zhili.wzl@alibaba-inc.com>
Date: Thu, 2 Dec 2021 15:00:10 +0800
Subject: [PATCH] fix(vue): fix void field children is not undefined (#2551)

---
 .../vue/src/__tests__/schema.markup.spec.ts   | 32 ++++++++++++
 packages/vue/src/components/RecursionField.ts | 52 +++++++++----------
 2 files changed, 58 insertions(+), 26 deletions(-)

diff --git a/packages/vue/src/__tests__/schema.markup.spec.ts b/packages/vue/src/__tests__/schema.markup.spec.ts
index c30a22c5f47..8ef41b71134 100644
--- a/packages/vue/src/__tests__/schema.markup.spec.ts
+++ b/packages/vue/src/__tests__/schema.markup.spec.ts
@@ -660,4 +660,36 @@ describe('recursion field', () => {
     expect(wrapper.find('.ccc').exists()).toBeTruthy()
     wrapper.destroy()
   })
+
+  test('void field children', () => {
+    const form = createForm()
+    const VoidComponent = {
+      render(h: CreateElement) {
+        return h(
+          'div',
+          { attrs: { 'data-testid': 'void-component' } },
+          this.$slots.default || 'placeholder'
+        )
+      },
+    }
+    const { SchemaField, SchemaVoidField } = createSchemaField({
+      components: {
+        VoidComponent,
+      },
+    })
+    const { queryByTestId } = render({
+      components: { SchemaField, SchemaVoidField },
+      data() {
+        return {
+          form,
+        }
+      },
+      template: `<FormProvider :form="form">
+        <SchemaField>
+          <SchemaVoidField x-component="VoidComponent" />
+        </SchemaField>
+      </FormProvider>`,
+    })
+    expect(queryByTestId('void-component').textContent).toBe('placeholder')
+  })
 })
diff --git a/packages/vue/src/components/RecursionField.ts b/packages/vue/src/components/RecursionField.ts
index 09d488f95ff..1cec9e473ff 100644
--- a/packages/vue/src/components/RecursionField.ts
+++ b/packages/vue/src/components/RecursionField.ts
@@ -82,35 +82,35 @@ const RecursionField = observer(
 
         const renderProperties = (field?: GeneralField) => {
           if (props.onlyRenderSelf) return
-          const children = fieldSchemaRef.value.mapProperties(
-            (item, name, index) => {
-              const base = field?.address || basePath
-              let schema: Schema = item
-              if (isFn(props.mapProperties)) {
-                const mapped = props.mapProperties(item, name)
-                if (mapped) {
-                  schema = mapped
-                }
+          const properties = Schema.getOrderProperties(fieldSchemaRef.value)
+          if (!properties.length) return
+          const children = properties.map(({ schema: item, key: name }) => {
+            const base = field?.address || basePath
+            let schema: Schema = item
+            if (isFn(props.mapProperties)) {
+              const mapped = props.mapProperties(item, name)
+              if (mapped) {
+                schema = mapped
               }
-              if (isFn(props.filterProperties)) {
-                if (props.filterProperties(schema, name) === false) {
-                  return null
-                }
+            }
+            if (isFn(props.filterProperties)) {
+              if (props.filterProperties(schema, name) === false) {
+                return null
               }
-              return h(
-                RecursionField,
-                {
-                  key: name,
-                  attrs: {
-                    schema,
-                    name,
-                    basePath: base,
-                  },
-                },
-                {}
-              )
             }
-          )
+            return h(
+              RecursionField,
+              {
+                key: name,
+                attrs: {
+                  schema,
+                  name,
+                  basePath: base,
+                },
+              },
+              {}
+            )
+          })
 
           const slots: Record<string, () => any> = {}
           if (children.length > 0) {