setFieldsValue also update Fields status

Author: zombieJ

src/Field.tsx

@@ -163,9 +163,18 @@ class Field extends React.Component<FieldProps, FieldState> implements FieldEnti
     const prevValue = this.getValue(prevStore);
     const curValue = this.getValue();
 
+    const namePathMatch = namePathList && containsNamePath(namePathList, namePath);
+
+    // `setFieldsValue` is a quick access to update related status
+    if (info.type === 'valueUpdate' && info.source === 'external' && prevValue !== curValue) {
+      this.touched = true;
+      this.validatePromise = null;
+      this.errors = [];
+    }
+
     switch (info.type) {
       case 'reset':
-        if (!namePathList || (namePathList && containsNamePath(namePathList, namePath))) {
+        if (!namePathList || namePathMatch) {
           // Clean up state
           this.touched = false;
           this.validatePromise = null;
@@ -181,7 +190,7 @@ class Field extends React.Component<FieldProps, FieldState> implements FieldEnti
         break;
 
       case 'setField': {
-        if (namePathList && containsNamePath(namePathList, namePath)) {
+        if (namePathMatch) {
           const { data } = info;
           if ('touched' in data) {
             this.touched = data.touched;
@@ -205,7 +214,7 @@ class Field extends React.Component<FieldProps, FieldState> implements FieldEnti
          */
         const dependencyList = dependencies.map(getNamePath);
         if (
-          (namePathList && containsNamePath(namePathList, namePath)) ||
+          namePathMatch ||
           dependencyList.some(dependency => containsNamePath(info.relatedFields, dependency))
         ) {
           this.reRender();
@@ -222,12 +231,12 @@ class Field extends React.Component<FieldProps, FieldState> implements FieldEnti
          *   - else to check if value changed
          */
         if (
-          (namePathList && containsNamePath(namePathList, namePath)) ||
+          namePathMatch ||
           dependencies.some(dependency =>
             containsNamePath(namePathList, getNamePath(dependency)),
           ) ||
           (typeof shouldUpdate === 'function'
-            ? shouldUpdate(prevStore, values, info)
+            ? shouldUpdate(prevStore, values, 'source' in info ? { source: info.source } : {})
             : prevValue !== curValue)
         ) {
           this.reRender();

src/interface.ts

@@ -111,10 +111,15 @@ export type InternalValidateFields = (
 ) => Promise<Store>;
 export type ValidateFields = (nameList?: NamePath[]) => Promise<Store>;
 
+interface ValueUpdateInfo {
+  type: 'valueUpdate';
+  source: 'internal' | 'external';
+}
+
 export type NotifyInfo =
+  | ValueUpdateInfo
   | {
-      type: 'valueUpdate' | 'validateFinish' | 'reset';
-      source?: 'internal' | 'external';
+      type: 'validateFinish' | 'reset';
     }
   | {
       type: 'setField';

src/useForm.ts

@@ -369,7 +369,7 @@ export class FormStore {
       this.store = setValues(this.store, store);
     }
 
-    this.notifyObservers(prevStore, null, { type: 'valueUpdate' });
+    this.notifyObservers(prevStore, null, { type: 'valueUpdate', source: 'external' });
   };
 
   private getDependencyChildrenFields = (rootNamePath: InternalNamePath): InternalNamePath[] => {

tests/index.test.js

@@ -474,4 +474,60 @@ describe('Form.Basic', () => {
     expect(called1).toBeTruthy();
     expect(called2).toBeTruthy();
   });
+
+  it('setFieldsValue should clean up status', async () => {
+    let form;
+    let currentMeta;
+
+    const wrapper = mount(
+      <div>
+        <Form
+          ref={instance => {
+            form = instance;
+          }}
+        >
+          <Field name="normal" rules={[{ validator: () => new Promise(() => {}) }]}>
+            {(control, meta) => {
+              currentMeta = meta;
+              return <Input {...control} />;
+            }}
+          </Field>
+        </Form>
+      </div>,
+    );
+
+    // Init
+    expect(form.getFieldValue('normal')).toBe(undefined);
+    expect(form.isFieldTouched('normal')).toBeFalsy();
+    expect(form.getFieldError('normal')).toEqual([]);
+    expect(currentMeta.validating).toBeFalsy();
+
+    // Set it
+    form.setFieldsValue({
+      normal: 'Light',
+    });
+
+    expect(form.getFieldValue('normal')).toBe('Light');
+    expect(form.isFieldTouched('normal')).toBeTruthy();
+    expect(form.getFieldError('normal')).toEqual([]);
+    expect(currentMeta.validating).toBeFalsy();
+
+    // Input it
+    await changeValue(getField(wrapper), 'Bamboo');
+
+    expect(form.getFieldValue('normal')).toBe('Bamboo');
+    expect(form.isFieldTouched('normal')).toBeTruthy();
+    expect(form.getFieldError('normal')).toEqual([]);
+    expect(currentMeta.validating).toBeTruthy();
+
+    // Set it again
+    form.setFieldsValue({
+      normal: 'Light',
+    });
+
+    expect(form.getFieldValue('normal')).toBe('Light');
+    expect(form.isFieldTouched('normal')).toBeTruthy();
+    expect(form.getFieldError('normal')).toEqual([]);
+    expect(currentMeta.validating).toBeFalsy();
+  });
 });