fix: List nest Field should correct removed (#737)

* fix: List remove not match * test: update test * fix: logic adjust * chore: warning update
react-component · Nov 27, 2024 · 4c37153 · 4c37153
1 parent 60f43be
commit 4c37153
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 4 deletions.
diff --git a/src/Field.tsx b/src/Field.tsx
@@ -689,8 +689,10 @@ function WrapperField<Values = any>({ name, ...restProps }: FieldProps<Values>)
   const listContext = React.useContext(ListContext);
   const namePath = name !== undefined ? getNamePath(name) : undefined;
 
+  const isMergedListField = restProps.isListField ?? !!listContext;
+
   let key: string = 'keep';
-  if (!restProps.isListField) {
+  if (!isMergedListField) {
     key = `_${(namePath || []).join('_')}`;
   }
 
@@ -699,7 +701,7 @@ function WrapperField<Values = any>({ name, ...restProps }: FieldProps<Values>)
   if (
     process.env.NODE_ENV !== 'production' &&
     restProps.preserve === false &&
-    restProps.isListField &&
+    isMergedListField &&
     namePath.length <= 1
   ) {
     warning(false, '`preserve` should not apply on Form.List fields.');
@@ -709,7 +711,7 @@ function WrapperField<Values = any>({ name, ...restProps }: FieldProps<Values>)
     <Field
       key={key}
       name={namePath}
-      isListField={!!listContext}
+      isListField={isMergedListField}
       {...restProps}
       fieldContext={fieldContext}
     />

diff --git a/tests/list.test.tsx b/tests/list.test.tsx
@@ -6,7 +6,7 @@ import type { FormProps } from '../src';
 import type { ListField, ListOperations, ListProps } from '../src/List';
 import type { FormInstance, Meta } from '../src/interface';
 import ListContext from '../src/ListContext';
-import { Input } from './common/InfoField';
+import InfoField, { Input } from './common/InfoField';
 import { changeValue, getInput } from './common';
 import timeout from './common/timeout';
 
@@ -892,4 +892,49 @@ describe('Form.List', () => {
     await changeValue(getInput(container, 2), 'changed3');
     expect(formRef.current.isFieldsTouched(true)).toBeTruthy();
   });
+
+  // https://github.com/ant-design/ant-design/issues/51702
+  it('list nest field should ignore preserve', async () => {
+    const formRef = React.createRef<FormInstance>();
+
+    const { container } = render(
+      <Form ref={formRef} preserve={false}>
+        <Form.List name="list">
+          {(fields, { remove }) => {
+            return (
+              <>
+                {fields.map(field => (
+                  <InfoField key={field.key} name={[field.name, 'user']} />
+                ))}
+                <button onClick={() => remove(1)}>remove</button>
+              </>
+            );
+          }}
+        </Form.List>
+      </Form>,
+    );
+
+    formRef.current!.setFieldValue('list', [
+      { user: '1' },
+      { user: '2' },
+      {
+        user: '3',
+      },
+    ]);
+
+    await act(async () => {
+      await timeout();
+    });
+
+    expect(container.querySelectorAll('input')).toHaveLength(3);
+
+    // Remove 1 should keep correct value
+    fireEvent.click(container.querySelector('button')!);
+
+    await act(async () => {
+      await timeout();
+    });
+
+    expect(formRef.current!.getFieldValue('list')).toEqual([{ user: '1' }, { user: '3' }]);
+  });
 });