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

[v5] Remove condition restricting error display to touched inputs #9781

Merged
merged 12 commits into from
Apr 18, 2024

Conversation

slax57
Copy link
Contributor

@slax57 slax57 commented Apr 18, 2024

Problem

All RA inputs have this condition:

error={(isTouched || isSubmitted) && invalid}

which only allows to display validation errors if the input is touched or the form was submitted.

This prevents displaying errors preventively on inputs that have not been touched. Besides, it could be argued that it’s the form lib’s responsibility to decide what inputs are in error, and RA should not be opinionated about this.

Solution

Remove this check from all inputs.

Additional info

This will probably render #9724 obsolete.

@slax57 slax57 added WIP Work In Progress v5 labels Apr 18, 2024
docs/Upgrade.md Outdated
Comment on lines 909 to 918
## Inputs No Longer Require To Be Touched To Display A Validation Error

In previous versions, validation errors were only displayed after the input was touched or the form was submitted. In v5, validation errors are fully entrusted to the form library (`react-hook-form`), which is responsible to decide when to display them.

For most use-cases this will have no impact, because `react-hook-form` works the same way (it will wait for an input to be touched before triggering its validation).

But this should help with some advanced cases, for instance if some validation errors need to be displayed on untouched fields.

It will also improve the user experience, as the form `isValid` state will be consistent with error messages displayed on inputs, regardless of whether they have been touched or not.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Might be useful to remind users of the mode prop with a link to RHF documentation

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

done

@fzaninotto fzaninotto merged commit 86ed378 into next Apr 18, 2024
2 checks passed
@fzaninotto fzaninotto deleted the form-isTouched-isSubmitted branch April 18, 2024 16:01
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
RFR Ready For Review v5
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants