From b5f39ce0c3422b5d108e5772971fdb36408e4cf8 Mon Sep 17 00:00:00 2001
From: "p(^-^q)" <hashplus@users.noreply.github.com>
Date: Sun, 25 Apr 2021 13:22:18 +0800
Subject: [PATCH] =?UTF-8?q?fix(vue):=20mapProps=E3=80=81mapReadPretty=20li?=
 =?UTF-8?q?steners=20bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/vue/src/__tests__/field.spec.ts | 24 ++++++++++++++++++++----
 packages/vue/src/shared/connect.ts       |  3 ++-
 2 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/packages/vue/src/__tests__/field.spec.ts b/packages/vue/src/__tests__/field.spec.ts
index 8878539d053..adab8761c04 100644
--- 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
index 4320d241422..6e6eb20a0b9 100644
--- 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
           )