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.

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

fix: checkbox validation reset not working #7268

Merged
merged 24 commits into from
Nov 13, 2024
Merged

fix: checkbox validation reset not working #7268

merged 24 commits into from
Nov 13, 2024

Conversation

nwidynski
Copy link
Contributor

@nwidynski nwidynski commented Oct 28, 2024

Replaces #6079
Closes #5693

✅ Pull Request Checklist:

  • Included link to corresponding React Spectrum GitHub Issue.
  • Added/updated unit tests and storybook for this change (for new code or code which already has tests).
  • Filled out test instructions.
  • Updated documentation (if it already exists for this component).
  • Looked at the Accessibility Practices for this feature - Aria Practices

📝 Test Instructions:

🧢 Your Project:

@nwidynski
Copy link
Contributor Author

@LFDanLu Pipeline seems to be stuck, can someone restart? Otherwise i think this is good to go.

@nwidynski
Copy link
Contributor Author

nwidynski commented Nov 4, 2024

@LFDanLu I think what @devongovett was referencing here was using onPress to commit the validation.

Is there a specific reason for useToggle() not accepting onPress handlers? Alternatively, we could piggyback the state.toggle().

@LFDanLu
Copy link
Member

LFDanLu commented Nov 5, 2024

@nwidynski I don't quite remember if there was a specific reason for not accepting onPress handlers, but I wanna say that it was mainly because a toggle didn't really feel like it needed to handle user specific press handling since users could hook into onChange instead. As a gut feeling, piggybacking off of state.toggle like you've done feels sound, but I'll need to poke around and test it some more. Thanks for the updates, will definite see about taking a deeper look soon!

LFDanLu
LFDanLu previously approved these changes Nov 7, 2024
Copy link
Member

@LFDanLu LFDanLu left a comment

Choose a reason for hiding this comment

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

LGTM, verified the proper behavior on both the RAC/RSP docs and in our storybook examples. Thank you so much for coming back and picking this one back up!

Comment on lines 65 to 66
// Reset validation state on label click for checkbox with a hidden input.
state.toggle = chain(state.toggle, () => {
Copy link
Member

Choose a reason for hiding this comment

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

A coworker pointed out that this is mutating the state object and thus if the child that called useCheckbox is rerendering more than the state is being recreated then multiple state.toggles could be chained here. What do you think about just calling usePress in here and duplicating what useToggle does for labelProps? A bit gross that we'd be duplicating the code but maybe good enough for now until we decide whether or not useToggle should accept press handlers.

Copy link
Contributor Author

@nwidynski nwidynski Nov 8, 2024

Choose a reason for hiding this comment

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

Good catch 👍

I don't think it matters as useToggleState isn't memoized anyways, but we can usePress here if you want to make sure. Alternatively, if you don't like a duplicated usePress, we could memoize instead.

state.toggle = chain(useCallback(state.toggle, [isSelected]), () => {
  ...
});

Copy link
Member

Choose a reason for hiding this comment

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

I still don't like mutating the state object, it breaks some assumptions and makes it harder to debug.
I'd prefer to just duplicate the code.

Co-authored-by: Daniel Lu <danilu@adobe.com>
Copy link
Member

@LFDanLu LFDanLu left a comment

Choose a reason for hiding this comment

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

Thanks for the updates!

@LFDanLu LFDanLu added this pull request to the merge queue Nov 13, 2024
Merged via the queue into adobe:main with commit 262cc75 Nov 13, 2024
30 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Checkbox Group Validation
3 participants