-
Notifications
You must be signed in to change notification settings - Fork 1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Checkbox Group Validation #5693
Comments
Thanks for filing this issue. I noticed this actually doesn't happen in our React Spectrum CheckboxGroup equivalent, seems to be due to our usage of a visually hidden input for the RAC Checkbox vs using an actual input. Typically |
@LFDanLu I took some time to take a look at this. This issue seems pretty isolated to RAC's implementation of a visually hidden input, so can't we fix this inside RAC? A slightly hacky, but working solution could look something like this: /**
* Setup a stable callback to propagate changes in the state.
*/
let onChange = props.onChange;
if (!groupState || groupState.isInvalid) {
const event = new Event('change');
const dispatch = () => inputRef.current?.dispatchEvent(event);
onChange = chain(dispatch, onChange);
}
props.onChange = useEffectEvent(onChange); |
@nwidynski While that may certainly fix it for RAC, my concern is that someone may build their own checkbox using our checkbox hooks instead of opting to use RAC and use a visually hidden input in a similar fashion like we suggest here. They would then run into original problem as well then and need to create a similar fix local to their implementation. |
@LFDanLu Got it. Since a fix here won't do the trick for the isolated scenario, how about something like this in /**
* Hook the label `onClick` handler to clear the validation state.
* This is useful when implementing `<Checkbox />` with a hidden input for styling.
*
* See: https://github.com/adobe/react-spectrum/issues/5693
*/
const { [privateValidationStateProp]: groupValidationState } = props;
const dispatch = () => {
const { realtimeValidation, commitValidation } = groupValidationState
? groupValidationState
: validationState;
if (realtimeValidation.isInvalid) {
commitValidation();
}
};
labelProps.onClick = chain(dispatch, labelProps.onClick); |
@nwidynski Yep, that seems promising! Do you want to open a PR for that change? |
Hi, We've come across the same bug, but it seems that it works with tab + space to check the checkbox, but it does not work with mouse clicks. Would #6079 fix that as well? |
Yes I believe so, is the behavior in these built docs essentially what you are looking for? |
Yes! Both the Group Validation and the Individual Validation behaviour is what we have been trying to do, and the examples on the individual are spot on for our use case as well. |
Provide a general summary of the issue here
It seems the Checkbox Group validation example does not revalidate after the checkbox is pressed.
To note: Fantastic work on
react-aria-components
, keep up the great work!🤔 Expected Behavior?
Checkbox Group should clear validation when at least one checkbox is selected.
😯 Current Behavior
Checkbox Group does not clear validation.
💁 Possible Solution
No response
🔦 Context
No response
🖥️ Steps to Reproduce
React Aria's Documentation Example for Checkbox Group Validation
Version
react-aria-components@1.0.0
What browsers are you seeing the problem on?
Chrome
If other, please specify.
No response
What operating system are you using?
MacOS
🧢 Your Company/Team
No response
🕷 Tracking Issue
No response
The text was updated successfully, but these errors were encountered: