fix: Nest Field.List item will not clean up on onValuesChange when removed (#213)

* test: test driven

* fix: Ignore fieldList when list field

* chore: Clean up

Author: zombieJ

src/Field.tsx

@@ -359,6 +359,8 @@ class Field extends React.Component<InternalFieldProps, FieldState> implements F
 
   public getErrors = () => this.errors;
 
+  public isListField = () => this.props.isListField;
+
   // ============================= Child Component =============================
   public getMeta = (): Meta => {
     // Make error & validating in cache to save perf

src/List.tsx

@@ -5,19 +5,19 @@ import FieldContext from './FieldContext';
 import Field from './Field';
 import { move, getNamePath } from './utils/valueUtil';
 
-interface ListField {
+export interface ListField {
   name: number;
   key: number;
   isListField: boolean;
 }
 
-interface ListOperations {
+export interface ListOperations {
   add: (defaultValue?: StoreValue, index?: number) => void;
   remove: (index: number | number[]) => void;
   move: (from: number, to: number) => void;
 }
 
-interface ListProps {
+export interface ListProps {
   name: NamePath;
   rules?: ValidatorRule[];
   validateTrigger?: string | string[] | false;

src/index.tsx

@@ -25,6 +25,6 @@ RefForm.Field = Field;
 RefForm.List = List;
 RefForm.useForm = useForm;
 
-export { FormInstance, Field, List, useForm, FormProvider };
+export { FormInstance, Field, List, useForm, FormProvider, FormProps };
 
 export default RefForm;

src/interface.ts

@@ -97,6 +97,7 @@ export interface FieldEntity {
   isFieldTouched: () => boolean;
   isFieldDirty: () => boolean;
   isFieldValidating: () => boolean;
+  isListField: () => boolean;
   validateRules: (options?: ValidateOptions) => Promise<string[]>;
   getMeta: () => Meta;
   getNamePath: () => InternalNamePath;

src/useForm.ts

@@ -211,6 +211,12 @@ export class FormStore {
       const namePath =
         'INVALIDATE_NAME_PATH' in entity ? entity.INVALIDATE_NAME_PATH : entity.getNamePath();
 
+        // Ignore when it's a list item and not specific the namePath,
+        // since parent field is already take in count
+        if (!nameList && (entity as FieldEntity).isListField?.()) {
+          return;
+        }
+
       if (!filterFunc) {
         filteredNameList.push(namePath);
       } else {

tests/list.test.js renamed to tests/list.test.tsx

@@ -1,16 +1,26 @@
 import React from 'react';
 import { act } from 'react-dom/test-utils';
-import { mount } from 'enzyme';
+import { mount, ReactWrapper } from 'enzyme';
 import { resetWarned } from 'rc-util/lib/warning';
-import Form, { Field, List } from '../src';
+import Form, { Field, List, FormProps } from '../src';
+import { ListField, ListOperations, ListProps } from '../src/List';
+import { Meta } from '../src/interface';
 import { Input } from './common/InfoField';
 import { changeValue, getField } from './common';
 import timeout from './common/timeout';
 
 describe('Form.List', () => {
   let form;
 
-  function generateForm(renderList, formProps, listProps) {
+  function generateForm(
+    renderList?: (
+      fields: ListField[],
+      operations: ListOperations,
+      meta: Meta,
+    ) => JSX.Element | React.ReactNode,
+    formProps?: FormProps,
+    listProps?: Partial<ListProps>,
+  ): [ReactWrapper, () => ReactWrapper] {
     const wrapper = mount(
       <div>
         <Form
@@ -523,7 +533,7 @@ describe('Form.List', () => {
   it('warning if children is not function', () => {
     const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
 
-    generateForm(<div />);
+    generateForm(<div /> as any);
 
     expect(errorSpy).toHaveBeenCalledWith('Warning: Form.List only accepts function as children.');
 
@@ -605,4 +615,35 @@ describe('Form.List', () => {
     expect(currentValue).toEqual([undefined]);
     expect(currentMeta.errors).toEqual(['Bamboo Light']);
   });
+
+  it('Nest list remove should trigger correct onValuesChange', () => {
+    const onValuesChange = jest.fn();
+
+    const [wrapper] = generateForm(
+      (fields, operation) => (
+        <div>
+          {fields.map(field => (
+            <Field {...field} name={[field.name, 'first']}>
+              <Input />
+            </Field>
+          ))}
+          <button
+            type="button"
+            onClick={() => {
+              operation.remove(1);
+            }}
+          />
+        </div>
+      ),
+      {
+        onValuesChange,
+        initialValues: {
+          list: [{ first: 'light' }, { first: 'bamboo' }],
+        },
+      },
+    );
+
+    wrapper.find('button').simulate('click');
+    expect(onValuesChange).toHaveBeenCalledWith(expect.anything(), { list: [{ first: 'light' }] });
+  });
 });