fix: List.Field should keep status (#133)

* fix: Add list field mark

* add test case

Author: zombieJ

src/Field.tsx

@@ -76,6 +76,9 @@ export interface InternalFieldProps {
 
 export interface FieldProps extends Omit<InternalFieldProps, 'name'> {
   name?: NamePath;
+
+  /** @private Passed by Form.List props. */
+  isListField?: boolean;
 }
 
 export interface FieldState {
@@ -491,9 +494,14 @@ class Field extends React.Component<InternalFieldProps, FieldState, InternalForm
   }
 }
 
-const WrapperField: React.FC<FieldProps> = ({ name, ...restProps }) => {
+const WrapperField: React.FC<FieldProps> = ({ name, isListField, ...restProps }) => {
   const namePath = name !== undefined ? getNamePath(name) : undefined;
-  return <Field key={`_${(namePath || []).join('_')}`} name={namePath} {...restProps} />;
+
+  let key: string = 'keep';
+  if (!isListField) {
+    key = `_${(namePath || []).join('_')}`;
+  }
+  return <Field key={key} name={namePath} {...restProps} />;
 };
 
 export default WrapperField;

src/List.tsx

@@ -8,6 +8,7 @@ import { move, getNamePath } from './utils/valueUtil';
 interface ListField {
   name: number;
   key: number;
+  isListField: boolean;
 }
 
 interface ListOperations {
@@ -117,6 +118,7 @@ const List: React.FunctionComponent<ListProps> = ({ name, children }) => {
                 return {
                   name: index,
                   key,
+                  isListField: true,
                 };
               },
             ),

tests/list.test.js

@@ -217,25 +217,61 @@ describe('Form.List', () => {
     matchKey(1, '2');
   });
 
-  it('validate', async () => {
-    const [, getList] = generateForm(
-      fields => (
-        <div>
-          {fields.map(field => (
-            <Field {...field} rules={[{ required: true }]}>
-              <Input />
-            </Field>
-          ))}
-        </div>
-      ),
-      {
-        initialValues: { list: [''] },
-      },
-    );
+  describe('validate', () => {
+    it('basic', async () => {
+      const [, getList] = generateForm(
+        fields => (
+          <div>
+            {fields.map(field => (
+              <Field {...field} rules={[{ required: true }]}>
+                <Input />
+              </Field>
+            ))}
+          </div>
+        ),
+        {
+          initialValues: { list: [''] },
+        },
+      );
 
-    await changeValue(getField(getList()), '');
+      await changeValue(getField(getList()), '');
 
-    expect(form.getFieldError(['list', 0])).toEqual(["'list.0' is required"]);
+      expect(form.getFieldError(['list', 0])).toEqual(["'list.0' is required"]);
+    });
+
+    it('remove should keep error', async () => {
+      const [wrapper, getList] = generateForm(
+        (fields, { remove }) => (
+          <div>
+            {fields.map(field => (
+              <Field {...field} rules={[{ required: true }]}>
+                <Input />
+              </Field>
+            ))}
+
+            <button
+              type="button"
+              onClick={() => {
+                remove(0);
+              }}
+            />
+          </div>
+        ),
+        {
+          initialValues: { list: ['', ''] },
+        },
+      );
+
+      expect(wrapper.find(Input)).toHaveLength(2);
+      await changeValue(getField(getList(), 1), '');
+      expect(form.getFieldError(['list', 1])).toEqual(["'list.1' is required"]);
+
+      wrapper.find('button').simulate('click');
+      wrapper.update();
+
+      expect(wrapper.find(Input)).toHaveLength(1);
+      expect(form.getFieldError(['list', 0])).toEqual(["'list.1' is required"]);
+    });
   });
 
   it('warning if children is not function', () => {