fix: preserve sibling values when nested list changes (#779)

* test: add mixed field list onValuesChange case

* fix: preserve sibling values for nested list changes

* test: cover nested list remove onValuesChange

Author: zombieJ

src/hooks/useForm.ts

@@ -1,5 +1,4 @@
 import { merge } from '@rc-component/util/lib/utils/set';
-import { mergeWith } from '@rc-component/util';
 import warning from '@rc-component/util/lib/warning';
 import * as React from 'react';
 import { HOOK_MARK } from '../FieldContext';
@@ -779,14 +778,9 @@ export class FormStore {
     const { onValuesChange } = this.callbacks;
 
     if (onValuesChange) {
-      const fieldEntity = this.getFieldsMap(true).get(namePath);
       const changedValues = cloneByNamePathList(this.store, [namePath]);
       const allValues = this.getFieldsValue();
-      // Merge changedValues into allValues to ensure allValues contains the latest changes
-      const mergedAllValues = mergeWith([allValues, changedValues], {
-        // When value is array, it means trigger by Form.List which should replace directly
-        prepareArray: current => (fieldEntity?.isList() ? [] : [...(current || [])]),
-      });
+      const mergedAllValues = setValue(allValues, namePath, getValue(changedValues, namePath));
       onValuesChange(changedValues, mergedAllValues);
     }
 

tests/dependencies.test.tsx

@@ -302,4 +302,94 @@ describe('Form.Dependencies', () => {
     await changeValue(getInput(container), '1');
     matchError(container, false);
   });
+
+  it('mixed field list should not missing value with onValuesChange', () => {
+    const onValuesChange = jest.fn();
+
+    const { container } = render(
+      <Form
+        initialValues={{ rules: [{ name: 'test', triggers: [] }] }}
+        onValuesChange={onValuesChange}
+      >
+        <Form.List name="rules">
+          {fields =>
+            fields.map(field => (
+              <div key={field.key}>
+                <Field {...field} name={[field.name, 'name']}>
+                  <Input />
+                </Field>
+
+                <Form.List name={[field.name, 'triggers']}>
+                  {(triggerFields, { add }) => (
+                    <>
+                      {triggerFields.map(triggerField => (
+                        <Field {...triggerField} key={triggerField.key}>
+                          <Input />
+                        </Field>
+                      ))}
+                      <button type="button" onClick={() => add('trigger_1')}>
+                        Add trigger
+                      </button>
+                    </>
+                  )}
+                </Form.List>
+              </div>
+            ))
+          }
+        </Form.List>
+      </Form>,
+    );
+
+    fireEvent.click(container.querySelector('button')!);
+
+    expect(onValuesChange).toHaveBeenLastCalledWith(
+      expect.anything(),
+      { rules: [{ name: 'test', triggers: ['trigger_1'] }] },
+    );
+  });
+
+  it('mixed field list remove should not missing value with onValuesChange', () => {
+    const onValuesChange = jest.fn();
+
+    const { container } = render(
+      <Form
+        initialValues={{ rules: [{ name: 'test', triggers: ['trigger_1', 'trigger_2'] }] }}
+        onValuesChange={onValuesChange}
+      >
+        <Form.List name="rules">
+          {fields =>
+            fields.map(field => (
+              <div key={field.key}>
+                <Field {...field} name={[field.name, 'name']}>
+                  <Input />
+                </Field>
+
+                <Form.List name={[field.name, 'triggers']}>
+                  {(triggerFields, { remove }) => (
+                    <>
+                      {triggerFields.map(triggerField => (
+                        <Field {...triggerField} key={triggerField.key}>
+                          <Input />
+                        </Field>
+                      ))}
+                      <button type="button" onClick={() => remove(0)}>
+                        Remove trigger
+                      </button>
+                    </>
+                  )}
+                </Form.List>
+              </div>
+            ))
+          }
+        </Form.List>
+      </Form>,
+    );
+
+    fireEvent.click(container.querySelector('button')!);
+
+    expect(onValuesChange).toHaveBeenLastCalledWith(
+      expect.anything(),
+      { rules: [{ name: 'test', triggers: ['trigger_2'] }] },
+    );
+  });
 });