react-spectrum
react-spectrum copied to clipboard
adobe
[RAC] `<RadioGroup />` displays validation result in realtime when `validate()` is used
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: https://github.com/adobe/react-spectrum/blob/9d37e2420a229f3f5f7267f4c63d1549543e8626/packages/%40react-stately/radio/src/useRadioGroupState.ts#L79
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
- Visit the playground
- Click radio option 2 or 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
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.
@snowystinger If i understand https://github.com/adobe/react-spectrum/pull/6079#discussion_r1569178215 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.
https://github.com/adobe/react-spectrum/blob/64ed13090ce77cc0e4cb4cd5602e75f655bff6bb/packages/%40react-types/shared/src/inputs.d.ts#L35-L40
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.
