DataForm toggleGroup control: support validation #71666
Conversation
|
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. |
oandregal
added
[Type] Enhancement
oandregal
requested review from
andrewserong,
jorgefilipecosta and
ntsekouras
| ); | ||
| return ( | ||
| <ToggleGroupControl | ||
| <ValidatedToggleGroupControl |
There was a problem hiding this comment.
@mirka Unless I'm doing something wrong, it looks like the required validation is not working for the ValidatedToggleGroupControl. It should be triggered when:
- the control starts with no value selected
- it gets focus and then loses it
The same happens in the component story.
Do you have any thoughts here (feel free to push to this PR if that helps)?
There was a problem hiding this comment.
In testing, it looks like if I tab to the control and tab away without selecting anything, it appears to correctly fire the validation. The validation doesn't appear to fire on the initial load of the story. That sounds fine to me, as the label indicates it's a required field, but just thought I'd double check that's what you were expecting, André?
There was a problem hiding this comment.
The validation doesn't appear to fire on the initial load of the story. That sounds fine to me, as the label indicates it's a required field, but just thought I'd double check that's what you were expecting, André?
Yeah, that's how validation works at the component level: it runs on blur the 1st time, then upon every user change.
andrewserong
left a comment
andrewserong
left a comment
There was a problem hiding this comment.
This tests well for me, and the code change looks straightforward:
| Invalid | Valid |
|---|---|
 |
 |
LGTM!
| ); | ||
| return ( | ||
| <ToggleGroupControl | ||
| <ValidatedToggleGroupControl |
There was a problem hiding this comment.
In testing, it looks like if I tab to the control and tab away without selecting anything, it appears to correctly fire the validation. The validation doesn't appear to fire on the initial load of the story. That sounds fine to me, as the label indicates it's a required field, but just thought I'd double check that's what you were expecting, André?
oandregal
force-pushed
the
update/dataform-validated-toggle-group
branch
from
b3eb849 to
3630af8
Compare
|
Flaky tests detected in e3ec46f. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/17757849558
|
Part of #71500
What?
Add support for
requiredandcustomvalidation in toggle group control.Why?
So that all controls support basic validation.
How?
Use the existing
ValidatedToggleGroupControlcomponent.Testing Instructions
In the storybook (
npm run storybook:dev) verify that it can takerequiredandcustomvalidation in the "DataViews > DataForm > Validation" story:Screen.Recording.2025-09-15.at.16.51.47.mov