fix: fix decorator attrs is not passed down correctly (#2369)

alibaba · Oct 31, 2021 · fee4af0 · fee4af0
1 parent 4b3d092
commit fee4af0
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 8 deletions.
diff --git a/packages/vue/src/__tests__/field.spec.ts b/packages/vue/src/__tests__/field.spec.ts
@@ -21,12 +21,18 @@ Vue.component('VoidField', VoidField)
 Vue.component('Field', Field)
 Vue.component('ReactiveField', ReactiveField as unknown as Vue)
 
-const Decorator: FunctionalComponentOptions = {
-  functional: true,
-  render(h, context) {
-    return h('div', context.data, context.children)
+const Decorator = defineComponent({
+  props: ['label'],
+  render(h) {
+    return h(
+      'div',
+      {
+        attrs: this.$attrs,
+      },
+      [this.label, this.$slots.default]
+    )
   },
-}
+})
 
 const Input = defineComponent({
   props: ['value'],
@@ -64,7 +70,7 @@ test('render field', async () => {
   const atBlur = jest.fn()
   const atFocus = jest.fn()
 
-  const { getByTestId, queryByTestId } = render(
+  const { getByTestId, queryByTestId, queryByText } = render(
     defineComponent({
       name: 'TestComponent',
       setup() {
@@ -82,7 +88,7 @@ test('render field', async () => {
       template: `<FormProvider :form="form">
       <Field
         name="aa"
-        :decorator="[Decorator]"
+        :decorator="[Decorator, {label: 'aa-decorator'}]"
         :component="[Input, { onChange }]"
       />
       <ArrayField name="bb" :decorator="[Decorator]">
@@ -146,6 +152,7 @@ test('render field', async () => {
   expect(form.query('aa').get('value')).toEqual('123')
   expect(form.query('kk').get('value')).toEqual('123')
   expect(getByTestId('mm-children')).not.toBeUndefined()
+  expect(queryByText('aa-decorator')).not.toBeNull()
 })
 
 test('render field with html attrs', async () => {

diff --git a/packages/vue/src/components/ReactiveField.ts b/packages/vue/src/components/ReactiveField.ts
@@ -107,7 +107,9 @@ export default observer(
                     {
                       style,
                       class: classes,
-                      attrs: decoratorData,
+                      attrs: {
+                        ...decoratorData,
+                      },
                     },
                     {
                       default: () => childNodes,