Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

with antd v4.18.3 or newer help labels on form items are always displayed even if they are empty #2779

Closed
3 tasks done
momesana opened this issue Mar 25, 2022 · 2 comments
Closed
3 tasks done
Labels
antd antd related theme issue bug

Comments

@momesana
Copy link
Contributor

momesana commented Mar 25, 2022

Prerequisites

Description

Antd version 4.18.3 introduced a small change (https://github.com/ant-design/ant-design/pull/33644/files#diff-2bf6ed805cec0d6717765729f24ab52e77149471de0b5ad3a568c9ad1c6c297bR228) that only hides the help label between the form item input and the description field if the value of the help property is undefined. Before the change any falsy value would do. Unfortunately this looks pretty weird in conjunction with the description field as the description is shifted away from the input in a way that they seem disjoint. It even looks as if the description belonged to the form item below it. Just to give you an impression of how that looks like, below is a screenshots of the same form with the antd versions 4.18.2 and 4.18.3 respectively:

Screenshot from 2022-03-25 03-25-19

The fix should be fairly simple. The expression in https://github.com/rjsf-team/react-jsonschema-form/blob/master/packages/antd/src/templates/FieldTemplate/index.js#L68 needs to be changed from

help={(!!rawHelp && help) || (!!rawErrors && renderFieldErrors())}

to

help={(!!rawHelp && help) || (!!rawErrors && renderFieldErrors()) || undefined}

or better still to

help={rawHelp ? help : rawErrors ? randerFieldErrors() : undefined}

which is a bit easier on the eyes.

Here is a very simple example that reproduces the problem:
https://stackblitz.com/edit/react-5zxqns-zozml8?file=index.js

Here is the exact same example but with a version of antd (4.18.2) that didn't yet cause that behaviour:
https://stackblitz.com/edit/react-5zxqns-gy4vis?file=index.js

Steps to Reproduce

Set up rjsf with a version of antd that is higher than 4.18.3 and use form items with descriptions.

Expected behavior

The help label is only shown if there is actual help content. The description field should be right below the form input element without a wide gap between them.

Actual behavior

An empty help label is shown if there is no help or error information. The description field is shifted down with a notable gap between the form input element and the description field.

Version

"@rjsf/antd": "^4.0.1",
"@rjsf/core": "^4.0.1",
"antd": "4.19.1",
@momesana
Copy link
Contributor Author

I've made a PR for this here: #2780

@jacqueswho jacqueswho added bug antd antd related theme issue awaiting review labels Apr 7, 2022
@heath-freenome
Copy link
Member

This has been fixed in the v5 beta

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
antd antd related theme issue bug
Projects
None yet
Development

No branches or pull requests

3 participants