Browse Source

fix: `ConfigProvider` merge form validateMessages not inheriting from parent bug (#43239)

* test(CP): add Form unit case

* fix:  `ConfigProvider ` merge form validateMessages not inheriting from parent bug
pull/43405/head
Wuxh 1 year ago
committed by GitHub
parent
commit
70abc90afd
No known key found for this signature in database GPG Key ID: 4AEE18F83AFDEB23
  1. 36
      components/config-provider/__tests__/form.test.tsx
  2. 2
      components/config-provider/context.ts
  3. 1
      components/config-provider/index.tsx

36
components/config-provider/__tests__/form.test.tsx

@ -148,6 +148,42 @@ describe('ConfigProvider.Form', () => {
'age must be between 18-99',
);
});
// https://github.com/ant-design/ant-design/issues/43210
it('should merge parent ConfigProvider validateMessages', async () => {
const MyForm = () => (
<Form>
<Form.Item name="name" label="Name" rules={[{ required: true }]}>
<Input />
</Form.Item>
<Button type="primary" htmlType="submit">
Submit
</Button>
</Form>
);
const { container, getAllByRole, getAllByText } = render(
<ConfigProvider>
<MyForm />
<ConfigProvider form={{ validateMessages: { required: 'Required' } }}>
<MyForm />
<ConfigProvider>
<MyForm />
</ConfigProvider>
</ConfigProvider>
</ConfigProvider>,
);
const submitButtons = getAllByRole('button');
expect(submitButtons).toHaveLength(3);
submitButtons.forEach(fireEvent.click);
await waitFakeTimer();
expect(container.querySelectorAll('.ant-form-item-explain-error')).toHaveLength(3);
expect(getAllByText('Please enter Name')).toHaveLength(1);
expect(getAllByText('Required')).toHaveLength(2);
});
});
describe('form requiredMark', () => {

2
components/config-provider/context.ts

@ -1,4 +1,5 @@
import type { DerivativeFunc } from '@ant-design/cssinjs';
import type { ValidateMessages } from 'rc-field-form/lib/interface';
import * as React from 'react';
import type { Options } from 'scroll-into-view-if-needed';
import type { ButtonProps } from '../button';
@ -81,6 +82,7 @@ export interface ConfigConsumerProps {
requiredMark?: RequiredMark;
colon?: boolean;
scrollToFirstError?: Options | boolean;
validateMessages?: ValidateMessages;
};
theme?: ThemeConfig;
select?: {

1
components/config-provider/index.tsx

@ -319,6 +319,7 @@ const ProviderChildren: React.FC<ProviderChildrenProps> = (props) => {
merge(
defaultLocale.Form?.defaultValidateMessages || {},
memoedConfig.locale?.Form?.defaultValidateMessages || {},
memoedConfig.form?.validateMessages || {},
form?.validateMessages || {},
),
[memoedConfig, form?.validateMessages],

Loading…
Cancel
Save