fix(vue): mapProps、mapReadPretty listeners bug

alibaba · Apr 25, 2021 · b5f39ce · b5f39ce
1 parent 600449e
commit b5f39ce
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 5 deletions.
diff --git a/packages/vue/src/__tests__/field.spec.ts b/packages/vue/src/__tests__/field.spec.ts
@@ -38,11 +38,11 @@ const Input = defineComponent({
     const fieldRef = useField()
     return () => {
       const field = fieldRef.value
-      return h('input', { 
+      return h('input', {
         attrs: {
           ...attrs,
           value: props.value,
-          'data-testid': field.path.toString() 
+          'data-testid': field.path.toString()
         },
         on: {
           ...listeners,
@@ -235,14 +235,26 @@ test('connect', async () => {
       }
     })
   )
+
+  const CustomField3 = connect(
+    Input,
+    mapProps(),
+    mapReadPretty({
+      render(h) {
+        return h('div', 'read pretty')
+      }
+    })
+  )
+
   const form = createForm()
-  const { queryByText } = render({
+  const { queryByText, getByTestId } = render({
     data() {
-      return { form, Decorator, CustomField, CustomField2 }
+      return { form, Decorator, CustomField, CustomField2, CustomField3 }
     },
     template: `<FormProvider :form="form">
       <Field name="aa" :decorator="[Decorator]" :component="[CustomField]" />
       <Field name="bb" :decorator="[Decorator]" :component="[CustomField2]" />
+      <Field name="cc" :decorator="[Decorator]" :component="[CustomField3]" />
     </FormProvider>`
   })
   form.query('aa').take((field) => {
@@ -254,6 +266,10 @@ test('connect', async () => {
     expect(queryByText('123')).toBeVisible()
   })
 
+  fireEvent.update(getByTestId('cc'), '123')
+  expect(queryByText('123')).toBeVisible()
+  expect(form.query('cc').get('value')).toEqual('123')
+
   form.query('aa').take((field) => {
     if (!isField(field)) return
     field.readPretty = true

diff --git a/packages/vue/src/shared/connect.ts b/packages/vue/src/shared/connect.ts
@@ -57,7 +57,7 @@ export function mapProps<T extends VueComponent = VueComponent>(...args: IStateM
 export function mapReadPretty<T extends VueComponent, C extends VueComponent>(component: C) {
   return (target: T) => {
     return observer<VueComponentProps<T>>(defineComponent({
-      setup(props, { attrs, slots }) {
+      setup(props, { attrs, slots, listeners }: Record<string, any>) {
         const fieldRef = useField()
         return () =>
           h(
@@ -68,6 +68,7 @@ export function mapReadPretty<T extends VueComponent, C extends VueComponent>(co
               attrs: {
                 ...attrs,
               },
+              on: listeners
             },
             slots
           )