fix: dependencies should work when field is already validated (#129)

* add dirty mark

* add test case

Author: zombieJ

package.json

@@ -43,6 +43,7 @@
     "react": "*"
   },
   "devDependencies": {
+    "@types/enzyme": "^3.10.5",
     "@types/jest": "^25.2.1",
     "@types/lodash": "^4.14.135",
     "@types/react": "^16.8.19",

src/Field.tsx

@@ -106,6 +106,9 @@ class Field extends React.Component<InternalFieldProps, FieldState> implements F
    */
   private touched: boolean = false;
 
+  /** Mark when touched & validated. Currently only used for `dependencies` */
+  private dirty: boolean = false;
+
   private validatePromise: Promise<string[]> | null = null;
 
   private prevValidating: boolean;
@@ -189,6 +192,7 @@ class Field extends React.Component<InternalFieldProps, FieldState> implements F
     // `setFieldsValue` is a quick access to update related status
     if (info.type === 'valueUpdate' && info.source === 'external' && prevValue !== curValue) {
       this.touched = true;
+      this.dirty = true;
       this.validatePromise = null;
       this.errors = [];
     }
@@ -198,6 +202,7 @@ class Field extends React.Component<InternalFieldProps, FieldState> implements F
         if (!namePathList || namePathMatch) {
           // Clean up state
           this.touched = false;
+          this.dirty = false;
           this.validatePromise = null;
           this.errors = [];
 
@@ -222,6 +227,7 @@ class Field extends React.Component<InternalFieldProps, FieldState> implements F
           if ('errors' in data) {
             this.errors = data.errors || [];
           }
+          this.dirty = true;
 
           this.reRender();
           return;
@@ -304,6 +310,7 @@ class Field extends React.Component<InternalFieldProps, FieldState> implements F
       validateFirst,
       messageVariables,
     );
+    this.dirty = true;
     this.validatePromise = promise;
     this.errors = [];
 
@@ -324,6 +331,8 @@ class Field extends React.Component<InternalFieldProps, FieldState> implements F
 
   public isFieldTouched = () => this.touched;
 
+  public isFieldDirty = () => this.dirty;
+
   public getErrors = () => this.errors;
 
   // ============================= Child Component =============================
@@ -400,6 +409,7 @@ class Field extends React.Component<InternalFieldProps, FieldState> implements F
     control[trigger] = (...args: EventArgs) => {
       // Mark as touched
       this.touched = true;
+      this.dirty = true;
 
       let newValue: StoreValue;
       if (getValueFromEvent) {

src/interface.ts

@@ -85,6 +85,7 @@ export interface ValidateErrorEntity {
 export interface FieldEntity {
   onStoreChange: (store: Store, namePathList: InternalNamePath[] | null, info: NotifyInfo) => void;
   isFieldTouched: () => boolean;
+  isFieldDirty: () => boolean;
   isFieldValidating: () => boolean;
   validateRules: (options?: ValidateOptions) => Promise<string[]>;
   getMeta: () => Meta;

src/useForm.ts

@@ -585,7 +585,7 @@ export class FormStore {
           children.add(field);
 
           const fieldNamePath = field.getNamePath();
-          if (field.isFieldTouched() && fieldNamePath.length) {
+          if (field.isFieldDirty() && fieldNamePath.length) {
             childrenFields.push(fieldNamePath);
             fillChildren(fieldNamePath);
           }

tests/dependencies.test.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import Form, { Field } from '../src';
+import timeout from './common/timeout';
 import InfoField, { Input } from './common/InfoField';
 import { changeValue, matchError, getField } from './common';
 
@@ -69,4 +70,56 @@ describe('Form.Dependencies', () => {
 
     expect(rendered).toBeTruthy();
   });
+
+  it('should work when field is dirty', async () => {
+    let pass = false;
+
+    const wrapper = mount(
+      <Form>
+        <InfoField
+          name="field_1"
+          rules={[
+            {
+              validator: () => {
+                if (pass) {
+                  return Promise.resolve();
+                }
+                return Promise.reject('You should not pass');
+              },
+            },
+          ]}
+          dependencies={['field_2']}
+        />
+
+        <InfoField name="field_2" />
+
+        <Field shouldUpdate>
+          {(_, __, { resetFields }) => (
+            <button
+              type="button"
+              onClick={() => {
+                resetFields();
+              }}
+            />
+          )}
+        </Field>
+      </Form>,
+    );
+
+    wrapper.find('form').simulate('submit');
+    await timeout();
+    wrapper.update();
+    matchError(getField(wrapper, 0), 'You should not pass');
+
+    // Mock new validate
+    pass = true;
+    await changeValue(getField(wrapper, 1), 'bamboo');
+    matchError(getField(wrapper, 0), false);
+
+    // Should not validate after reset
+    pass = false;
+    wrapper.find('button').simulate('click');
+    await changeValue(getField(wrapper, 1), 'light');
+    matchError(getField(wrapper, 0), false);
+  });
 });