Repository navigation
Enhance ValidatedInputControl to delay email validation until blur - #79518
NoumaanAhamed wants to merge 1 commit into
Conversation
|
Warning: Type of PR label mismatch To merge this PR, it requires exactly 1 label indicating the type of PR. Other labels are optional and not being checked here.
Read more about Type labels in Gutenberg. Don't worry if you don't have the required permissions to add labels; the PR reviewer should be able to help with the task. |
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
|
👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @NoumaanAhamed! In case you missed it, we'd love to have you join us in our Slack community. If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information. |
|
We are currently waiting for a design decision in the original issue. |
What?
Closes #79515
This PR adds a
revalidateOnprop toValidatedInputControland defaults it to'blur'foremailinput types, preventing noisy validation errors from displaying while the user is actively typing.Why?
Currently, validated email fields display error messages (e.g., "Please include an @ in the email address") continuously while a user is typing a new email address. This creates a noisy and premature validation UX because partial email addresses are expected to be invalid while being typed.
Aligning with form design best practices (NNG, Baymard, GOV.UK), this change ensures we don't present inline validation errors before the user has finished entering their information.
How?
revalidateOn?: 'change' | 'blur'property toValidatedControlPropsand surfaced it throughValidatedInputControland DataViews'ValidatedText.ValidatedInputControl, therevalidateOnproperty defaults to'blur'if the fieldtype === 'email'.ControlWithError, we intercept the child component'sonChangeevent viacloneElementto temporarily hide existing validation error messages and unset theisTouchedstate wheneverrevalidateOnis'blur'and the user interacts with the input. The existingonBlurbehavior correctly handles the re-validation once focus is lost. InterceptingonChangewithin React prevents synthetic event batching issues that happen if we use nativeaddEventListener('input').Testing Instructions
npm run storybook:dev.typecontrol toemail.requiredis enabled.Testing Instructions for Keyboard
Tabkey.Tabaway while empty to trigger the error.Shift + Tabback into the field and type a letter. The error should visually clear and announce correctly based on standard Aria live region behaviors.Tabaway with an invalid partial email and confirm the error message returns.Use of AI Tools
This PR was authored with the assistance of an Gemini 3.1 Pro using Google Antigravity. It was used to find the relevant files and ensure nothing else breaks.