fix: should not trigger onFieldsChange when submit (#598)

* test: test driven

* fix: not trigger if no need

* fix: check logic

Author: zombieJ

docs/examples/basic.tsx

@@ -6,7 +6,13 @@ export default () => {
   const [form] = Form.useForm();
 
   return (
-    <Form form={form} preserve={false}>
+    <Form
+      form={form}
+      preserve={false}
+      onFieldsChange={fields => {
+        console.error('fields:', fields);
+      }}
+    >
       <Field name="name">
         <Input placeholder="Username" />
       </Field>
@@ -32,6 +38,8 @@ export default () => {
           ) : null;
         }}
       </Field>
+
+      <button type="submit">Submit</button>
     </Form>
   );
 };

src/useForm.ts

@@ -830,7 +830,10 @@ export class FormStore {
       const changedFields = fields.filter(({ name: fieldName }) =>
         containsNamePath(namePathList, fieldName as InternalNamePath),
       );
-      onFieldsChange(changedFields, fields);
+
+      if (changedFields.length) {
+        onFieldsChange(changedFields, fields);
+      }
     }
   };
 
@@ -856,6 +859,10 @@ export class FormStore {
     // Collect result in promise list
     const promiseList: Promise<FieldError>[] = [];
 
+    // We temp save the path which need trigger for `onFieldsChange`
+    const TMP_SPLIT = String(Date.now());
+    const validateNamePathList = new Set<string>();
+
     this.getFieldEntities(true).forEach((field: FieldEntity) => {
       // Add field if not provide `nameList`
       if (!provideNameList) {
@@ -883,6 +890,8 @@ export class FormStore {
       }
 
       const fieldNamePath = field.getNamePath();
+      validateNamePathList.add(fieldNamePath.join(TMP_SPLIT));
+
       // Add field validate rule in to promise list
       if (!provideNameList || containsNamePath(namePathList, fieldNamePath)) {
         const promise = field.validateRules({
@@ -961,7 +970,10 @@ export class FormStore {
     returnPromise.catch<ValidateErrorEntity>(e => e);
 
     // `validating` changed. Trigger `onFieldsChange`
-    this.triggerOnFieldsChange(namePathList);
+    const triggerNamePathList = namePathList.filter(namePath =>
+      validateNamePathList.has(namePath.join(TMP_SPLIT)),
+    );
+    this.triggerOnFieldsChange(triggerNamePathList);
 
     return returnPromise as Promise<Store>;
   };

tests/validate.test.tsx

@@ -869,6 +869,43 @@ describe('Form.Validate', () => {
     expect(onMetaChange).toHaveBeenNthCalledWith(4, false);
   });
 
+  it('should not trigger onFieldsChange if no rules', async () => {
+    const onFieldsChange = jest.fn();
+    const onFinish = jest.fn();
+
+    const App = () => {
+      return (
+        <Form
+          onFieldsChange={onFieldsChange}
+          initialValues={{
+            list: ['hello'],
+          }}
+          onFinish={onFinish}
+        >
+          <Form.List name="list">
+            {fields =>
+              fields.map(field => (
+                <InfoField key={field.key} {...field}>
+                  <Input />
+                </InfoField>
+              ))
+            }
+          </Form.List>
+        </Form>
+      );
+    };
+    const wrapper = mount(<App />);
+
+    wrapper.find('form').simulate('submit');
+
+    await timeout();
+
+    expect(onFieldsChange).not.toHaveBeenCalled();
+    expect(onFinish).toHaveBeenCalledWith({
+      list: ['hello'],
+    });
+  });
+
   it('validateOnly', async () => {
     const formRef = React.createRef<FormInstance>();
     const { container } = render(