fix: isFieldsTouched return wrong result with param true (#653)

Co-authored-by: 轩浪 <[email protected]>

Author: lemonied

docs/demo/fieldTouched.md

@@ -0,0 +1,3 @@
+## fieldTouched
+
+<code src="../examples/fieldTouched.tsx"></code>

docs/examples/fieldTouched.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import Form from 'rc-field-form';
+
+export default () => {
+
+  const [form] = Form.useForm();
+  const [, forceUpdate] = React.useState({});
+
+  return (
+    <div>
+      <Form
+        form={form}
+        style={{ padding: 20 }}
+        initialValues={{
+          usename: '123',
+          list: [
+            {},
+          ],
+        }}
+      >
+        <Form.Field name="username">
+          <input />
+        </Form.Field>
+        <div style={{ paddingLeft: 20 }}>
+          <Form.List name="list">
+            {(fields, { add }) => (
+              <>
+                {
+                  fields.map((field) => {
+                    return (
+                      <div key={field.key}>
+                        <div>
+                          <Form.Field name={[field.name, 'field1']}>
+                            <input placeholder="field1" />
+                          </Form.Field>
+                        </div>
+                        <div>
+                          <Form.Field name={[field.name, 'field2']}>
+                            <input placeholder="field2" />
+                          </Form.Field>
+                        </div>
+                      </div>
+                    );
+                  })
+                }
+                <button onClick={() => add()}>add</button>
+              </>
+            )}
+          </Form.List>
+        </div>
+        <div>
+          <button
+            onClick={() => {
+              forceUpdate({});
+            }}
+          >forceUpdate</button>
+          <button
+            onClick={() => form.resetFields()}
+          >reset</button>
+        </div>
+        <div>form.isFieldsTouched(true): {`${form.isFieldsTouched(true)}`}</div>
+        <div>{`form.isFieldsTouched(['list'], true)`}: {`${form.isFieldsTouched(['list'], true)}`}</div>
+      </Form>
+    </div>
+  );
+}

src/useForm.ts

@@ -395,7 +395,7 @@ export class FormStore {
     // ===== Will get fully compare when not config namePathList =====
     if (!namePathList) {
       return isAllFieldsTouched
-        ? fieldEntities.every(isFieldTouched)
+        ? fieldEntities.every(entity => isFieldTouched(entity) || entity.isList())
         : fieldEntities.some(isFieldTouched);
     }
 

tests/list.test.tsx

@@ -845,4 +845,54 @@ describe('Form.List', () => {
       little: 9,
     });
   });
+
+  it('isFieldsTouched with params true', async () => {
+    const formRef = React.createRef<FormInstance>();
+
+    const { container } = render(
+      <Form
+        ref={formRef}
+        initialValues={{
+          usename: '',
+          list: [{}],
+        }}
+      >
+        <Form.Field name="username">
+          <input />
+        </Form.Field>
+        <Form.List name="list">
+          {(fields, { add }) => (
+            <>
+              {
+                fields.map((field) => {
+                  return (
+                    <React.Fragment key={field.key}>
+                      <Form.Field name={[field.name, 'field1']}>
+                        <input placeholder="field1" />
+                      </Form.Field>
+                      <Form.Field name={[field.name, 'field2']}>
+                        <input placeholder="field2" />
+                      </Form.Field>
+                    </React.Fragment>
+                  );
+                })
+              }
+              <button onClick={() => add()}>add</button>
+            </>
+          )}
+        </Form.List>
+      </Form>
+    );
+
+    expect(formRef.current.isFieldsTouched(true)).toBeFalsy();
+
+    await changeValue(getInput(container, 0), 'changed1');
+    expect(formRef.current.isFieldsTouched(true)).toBeFalsy();
+
+    await changeValue(getInput(container, 1), 'changed2');
+    expect(formRef.current.isFieldsTouched(true)).toBeFalsy();
+
+    await changeValue(getInput(container, 2), 'changed3');
+    expect(formRef.current.isFieldsTouched(true)).toBeTruthy();
+  });
 });