diff --git a/components/form/ErrorList.tsx b/components/form/ErrorList.tsx index c9197d7209..207c13dd3a 100644 --- a/components/form/ErrorList.tsx +++ b/components/form/ErrorList.tsx @@ -78,6 +78,17 @@ const ErrorList: React.FC = ({ ]; }, [help, helpStatus, debounceErrors, debounceWarnings]); + const filledKeyFullKeyList = React.useMemo(() => { + const keysCount: Record = {}; + fullKeyList.forEach(({ key }) => { + keysCount[key] = (keysCount[key] || 0) + 1; + }); + return fullKeyList.map((entity, index) => ({ + ...entity, + key: keysCount[entity.key] > 1 ? `${entity.key}-fallback-${index}` : entity.key, + })); + }, [fullKeyList]); + const helpProps: { id?: string } = {}; if (fieldId) { @@ -88,7 +99,7 @@ const ErrorList: React.FC = ({ {(holderProps) => { @@ -109,7 +120,7 @@ const ErrorList: React.FC = ({ role="alert" > { fireEvent.click(container.querySelector('input')!); expect(container.querySelector('input')?.checked).toBeTruthy(); }); + + it('not warning for react key', async () => { + const MockInput = (props: { onChange?: (value: number[]) => void }) => ( + { + props.onChange?.(value.split(',').map(Number)); + }} + /> + ); + + const { container } = render( +
+ + + + + +
, + ); + + function expectErrors(errors: string[]) { + expect(container.querySelectorAll('.ant-form-item-explain-error')).toHaveLength( + errors.length, + ); + errors.forEach((error, index) => { + expect(container.querySelectorAll('.ant-form-item-explain-error')[index]).toHaveTextContent( + error, + ); + }); + } + + // user type something and clear + await changeValue(0, '1'); + expectErrors(['LESS_THAN_10']); + + await changeValue(0, '1,1'); + expectErrors(['LESS_THAN_10', 'LESS_THAN_10']); + + await changeValue(0, '1'); + expectErrors(['LESS_THAN_10']); + + await changeValue(0, '100'); + expectErrors([]); + }); });