Skip to content
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.

Sign up for GitHub

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

Jump to bottom

fix: checkbox validation reset not working #6079

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
+20 −2
Open

fix: checkbox validation reset not working #6079

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
acc410c
add validation reset for checkbox with hidden input
nwidynski Mar 20, 2024
e63fa9a
fix: import sort alphabetically & ts-error on missing index signature
nwidynski Mar 20, 2024
796e332
fix: isRequired validation not resetting
nwidynski Mar 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
22 changes: 20 additions & 2 deletions packages/@react-aria/checkbox/src/useCheckbox.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,10 +11,11 @@
*/

import {AriaCheckboxProps} from '@react-types/checkbox';
import {chain} from '@react-aria/utils';
import {InputHTMLAttributes, LabelHTMLAttributes, RefObject, useEffect} from 'react';
import {privateValidationStateProp, useFormValidationState} from '@react-stately/form';
import {ToggleState} from '@react-stately/toggle';
import {useFormValidation} from '@react-aria/form';
import {useFormValidationState} from '@react-stately/form';
import {useToggle} from '@react-aria/toggle';
import {ValidationResult} from '@react-types/shared';

Expand Down Expand Up @@ -61,8 +62,25 @@ export function useCheckbox(props: AriaCheckboxProps, state: ToggleState, inputR
}
});

// Reset validation state on label click for checkbox with a hidden input.
let dispatch = () => {
// @ts-expect-error
let {[privateValidationStateProp]: groupValidationState} = props;

let {displayValidation, commitValidation} = groupValidationState
? groupValidationState
: validationState;

if (displayValidation.isInvalid) {
commitValidation();
}
};
Comment on lines +66 to +77
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Discussed with the team, we actually want it to match with the React Spectrum version of CheckboxGroup aka it gets re-invalidated if the user deselects the checkbox when the checkbox is required. This is a bit of an exception to the general "native" validation that is mentioned in the docs.

That would mean you should be able just call validationState.commitValidation() here I believe. @devongovett I recall you mentioned something about the keyboard and mouse behavior not matching up as well but I forget the specifics, do you recall? If it was along the lines of having "Enter" properly commitValidation as well, then I think we'll need to pass that down to useToggle as well.

Additionally would you mind adding a test for this?

Copy link
Author

@nwidynski nwidynski Apr 12, 2024 •
edited

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@LFDanLu Will surely do, I was waiting on general guidance where this should head.

Would you mind expanding on the reasoning why this behavior is desired in RAC? As you already recognized it will create inconsistencies with the docs as well as other RACs or custom components utilizing form validation. I would be interested in finding out more here as its relevant to our component library and I would like to make a call whether to patch this if not relevant to us.

Also do you have guidance on what to do with #6096 ? Its very closely related and will remain open if this is an exception for CheckboxGroup only.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

From the discussion with the team, it was mainly that an attempt was made to make CheckboxGroup's validation 100% consistent with the other components when validate was provided but it proved to be difficult hence the current behavior in RSP CheckboxGroup.

As for the "realtime" behavior, it follows how the native change event works hence why the textfield will only validate on blur but the checkbox/radiogroup validates on selection/deselection.


return {
labelProps,
labelProps: {
...labelProps,
onClick: chain(dispatch, labelProps.onClick)
},
inputProps: {
...inputProps,
checked: isSelected,
Expand Down