mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-01-18 14:13:37 +08:00
Code Issues Actions 28 Packages Projects Releases Wiki Activity

feat: improve noStyle validation message display logic (#41698)

Browse Source 
* test: add case

* feat: improve `noStyle` validation message display logic

When `noStyle=true` and `help=false`, the error message is blocked from being passed up

* test: update test case

* Revert "test: update test case"

This reverts commit a3e5d84ea620becb9e72b6b71766c01114add9ae.

* chore(type): update typo

* Revert "chore(type): update typo"

This reverts commit e13ec3ba5267394e8112fb742ec9bc9d4afdef5b.

* test(deps): DO NOT MERGE

* test: DO NOT MERGE

* Revert "test: DO NOT MERGE"

This reverts commit 2f4ea8e0ce64f88ab690c6e54b86034a92bcb55f.

* Revert "test(deps): DO NOT MERGE"

This reverts commit 48e700ef4aaa4675f29d3fbd23156bd8f692949e.
This commit is contained in:
Wuxh 2023-04-10 12:03:11 +08:00 committed by GitHub
parent 0e65dad8e9
commit 32f8134f4f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 41 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
components/form/FormItem/index.tsx
View File

@ -106,6 +106,7 @@ function InternalFormItem<Values = any>(props: FormItemProps<Values>): React.Rea
trigger = 'onChange',
validateTrigger,
hidden,
help,
} = props;
const { getPrefixCls } = React.useContext(ConfigContext);
const { name: formName } = React.useContext(FormContext);
@ -145,7 +146,7 @@ function InternalFormItem<Values = any>(props: FormItemProps<Values>): React.Rea
setMeta(nextMeta.destroy ? genEmptyMeta() : nextMeta, true);
// Bump to parent since noStyle
if (noStyle && notifyParentMetaChange) {
if (noStyle && help !== false && notifyParentMetaChange) {
let namePath = nextMeta.name;
if (!nextMeta.destroy) {
@ -322,9 +323,9 @@ function InternalFormItem<Values = any>(props: FormItemProps<Values>): React.Rea
childProps.id = fieldId;
}
if (props.help || mergedErrors.length > 0 || mergedWarnings.length > 0 || props.extra) {
if (help || mergedErrors.length > 0 || mergedWarnings.length > 0 || props.extra) {
const describedbyArr = [];
if (props.help || mergedErrors.length > 0) {
if (help || mergedErrors.length > 0) {
describedbyArr.push(`${fieldId}_help`);
}
if (props.extra) {

37
components/form/__tests__/index.test.tsx
View File

@ -171,6 +171,43 @@ describe('Form', () => {
await waitFakeTimer(2000, 2000);
expect(container.querySelector('.ant-form-item-explain-error')).toHaveTextContent('aaa');
});
// https://github.com/ant-design/ant-design/issues/41620
it('should not throw error when `help=false` and `noStyle=true`', async () => {
const App = (props: { help?: boolean | React.ReactNode }) => {
const { help = false } = props || {};
return (
<Form>
<Form.Item name="list" label="List" rules={[{ required: true }]}>
<Form.Item name={['list', 0]} noStyle help={help} rules={[{ required: true }]}>
<Input />
</Form.Item>
<Form.Item name={['list', 1]} noStyle help={help} rules={[{ required: true }]}>
<Input />
</Form.Item>
</Form.Item>
<Form.Item>
<button type="submit">submit</button>
</Form.Item>
</Form>
);
};
const { container, getByRole, rerender } = render(<App />);
// click submit to trigger validate
fireEvent.click(getByRole('button'));
await waitFakeTimer();
expect(container.querySelectorAll('.ant-form-item-explain-error')).toHaveLength(1);
// When noStyle=true but help is not false, help will be displayed
rerender(<App help="help" />);
await waitFakeTimer();
fireEvent.click(getByRole('button'));
await waitFakeTimer();
expect(container.querySelectorAll('.ant-form-item-explain-error')).toHaveLength(3);
});
});
it('render functions require either `shouldUpdate` or `dependencies`', () => {