[RAC] <RadioGroup /> displays validation result in realtime when validate() is used

[nwidynski]

Provide a general summary of the issue here

When using validate() on a <RadioGroup />, the validation result is displayed in realtime. This behavior is inconsistent with the docs of validate() and also with the validation behavior of <CheckboxGroup />.

🤔 Expected Behavior?

Either <RadioGroup /> should display its validation result on submit or the docs need adjustment.

😯 Current Behavior

An invalid validation result is displayed in realtime.

💁 Possible Solution

Without much investigation, my bet is on this line being the culprit:

react-spectrum/packages/@react-stately/radio/src/useRadioGroupState.ts

Line 79 in 9d37e24

validation.commitValidation();

I am not entirely sure why we need to commit here. I've looked at the original PR which introduced this line, but it seemed to have made it past review. Maybe @devongovett can help here with further insight.

🔦 Context

No response

🖥️ Steps to Reproduce

1. Visit the playground
2. Click radio option 2 or 3
3. Observe the invalid state displayed in realtime

Version

latest

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

OSX

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[snowystinger]

Possibly related #5693

[nwidynski]

Possibly related #5693

@snowystinger Yes they are. <Checkbox /> has the same issue, although only through keyboard selection. If im not missing anything, both issues stem from useFormValidation committing on every render. Additionally useRadioGroupState() also performs some additional commits which would have to be taken out.

I have also noticed, that an individual Radio doesn't receive the aria-invalid property but instead the div of the group does. I suppose this is intended behavior, but wanted to bring it up also.

Same goes for the onKeyDown event handler spread onto the group not being invoked at all in RAC <RadioGroup />.

Seems like there is a bit of cleanup to do in the radio hooks, but unsure whats required to stay for backwards compatibility. Fixing the commit issue without introducing breaking changes to useRadioGroupState() will require some more thought.

[nwidynski]

@snowystinger If i understand #6079 (comment) correctly, then this issue should be closable. It might make sense to adjust the docs slightly to inform developers of the different behavior of validate depending on the timing of the native change event.

react-spectrum/packages/@react-types/shared/src/inputs.d.ts

Lines 35 to 40 in 64ed130

	/**
	* A function that returns an error message if a given value is invalid.
	* Validation errors are displayed to the user when the form is submitted
	* if `validationBehavior="native"`. For realtime validation, use the `isInvalid`
	* prop instead.
	*/

[RobIsHere]

I've built a select box with useSelect() hook and it shows also the validation message before the user clicked submit. All other form fields like text inputs do not do this, so it's very confusing.