fix(vue): fix default slot invalid bug when not pass decorator (#3638)

alibaba · Dec 23, 2022 · 29b799c · 29b799c
1 parent 6f3fd56
commit 29b799c
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 2 deletions.
diff --git a/packages/vue/src/__tests__/field.spec.ts b/packages/vue/src/__tests__/field.spec.ts
@@ -160,6 +160,66 @@ test('render field', async () => {
   expect(queryByText('aa-decorator')).not.toBeNull()
 })
 
+const InputWithSlot = defineComponent({
+  props: ['value'],
+  setup(props, { attrs, listeners, slots }) {
+    const fieldRef = useField()
+    return () => {
+      const field = fieldRef.value
+      return h('div', {}, [
+        h('input', {
+          class: 'test-input',
+          attrs: {
+            ...attrs,
+            value: props.value,
+            'data-testid': field.path.toString(),
+          },
+          on: {
+            ...listeners,
+            input: listeners.change,
+          },
+        }),
+        [slots['append']?.({ path: field.path.toString() })],
+      ])
+    }
+  },
+})
+
+test('render in nesting slots with (ObjectField/ArrayField) no decorator', async () => {
+  const form = createForm()
+
+  const { getByTestId } = render(
+    defineComponent({
+      name: 'TestComponent',
+      setup() {
+        return {
+          form,
+          Normal,
+          InputWithSlot,
+          Decorator,
+        }
+      },
+      template: `<FormProvider :form="form">
+      <ObjectField name="cc" :component="['div']">
+        <Field name="mm" :decorator="[Decorator]" :component="[InputWithSlot]">
+          <template #append="{ path }">
+            <span :data-testid="'slot-prop-' +path"></span>
+          </template>
+        </Field>
+      </ObjectField>
+      <VoidField name="dd" :component="['div']">
+        <Field name="oo" :decorator="[Decorator]" :component="[InputWithSlot]" />
+      </VoidField>
+      
+    </FormProvider>`,
+    })
+  )
+
+  expect(getByTestId('oo')).not.toBeUndefined()
+  expect(getByTestId('cc.mm')).not.toBeUndefined()
+  expect(getByTestId('slot-prop-cc.mm')).not.toBeUndefined()
+})
+
 test('render field with html attrs', async () => {
   const form = createForm()
 

diff --git a/packages/vue/src/components/ReactiveField.ts b/packages/vue/src/components/ReactiveField.ts
@@ -71,8 +71,8 @@ const mergeSlots = (
   }
   const patchSlot =
     (slotName: string) =>
-    (originSlotScope: Record<string, any> = {}) =>
-      slots[slotName]?.({ field, form: field.form, ...originSlotScope }) ?? []
+    (...originArgs) =>
+      slots[slotName]?.({ field, form: field.form, ...originArgs[0] }) ?? []
 
   const patchedSlots: Record<string, (...args: any) => unknown[]> = {}
   slotNames.forEach((name) => {