diff --git a/src/Field.tsx b/src/Field.tsx index 62fac4e0..bfb650ce 100644 --- a/src/Field.tsx +++ b/src/Field.tsx @@ -689,8 +689,10 @@ function WrapperField({ name, ...restProps }: FieldProps) 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({ name, ...restProps }: FieldProps) 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({ name, ...restProps }: FieldProps) diff --git a/tests/list.test.tsx b/tests/list.test.tsx index 8662a8bb..170164e1 100644 --- 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(); + + const { container } = render( +
+ + {(fields, { remove }) => { + return ( + <> + {fields.map(field => ( + + ))} + + + ); + }} + +
, + ); + + 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' }]); + }); });