DataForm radio control: support validation and description #71664
Conversation
oandregal
added
[Type] Enhancement
|
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
force-pushed
the
update/dataform-validated-radio
branch
from
d15f0e3 to
4468771
Compare
|
Flaky tests detected in 4468771. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/17775435808
|
| setCustomValidity( undefined ); | ||
| }, | ||
| [ data, field, setValue ] | ||
| ); |
There was a problem hiding this comment.
I don't particularly love APIs that rely on the user of them to memoize props. 😅 I wonder if there's a way to avoid that, but that's a bigger question across all fields probably.
There was a problem hiding this comment.
For example: why is field an object and each property not a prop?
There was a problem hiding this comment.
Alternatively, if all properties of field are known, could we just list them here and construct the object within the callback? Or perhaps reconstruct a memoized field object beforehand to use everywhere? 🤔
There was a problem hiding this comment.
I'll look into this separately to make sure the callback is not invalidated in every render.
|
Not introduced here, but I noticed the story for 
|
|
Actually, I'm having problems testing it. It seems I have the same issue with the |
|
Actually it works in Chrome, but not Safari for me. |
|
It looks like an issue with |
|
I talked this with Ella in private, and she uncovered an issue with the underlying validated controls and Safari. I've been able to reproduce it in ValidatedRadioControl and ValidatedCheckboxControl, for example). It works fine in Chrome and Firefox. cc @mirka for awareness. Here's validation not working in Safari when interacting with the mouse: Screen.Recording.2025-09-17.at.10.04.23.movHere's validation working in Safari when interacting with the keyboard: Screen.Recording.2025-09-17.at.10.04.41.mov |
Part of #71500
What?
requiredandcustomvalidation in radio control.Why?
So that all controls support basic validation.
How?
Use the existing
ValidatedRadioControlcomponent.Testing Instructions
In the storybook (
npm run storybook:dev) verify that:requiredandcustomvalidation in the "DataViews > DataForm > Validation" story:Screen.Recording.2025-09-15.at.15.59.17.mov