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 control always sets the "readonly" attribute, which disables form validation #4402
Comments
👋 Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you've completed all the fields in the issue template so we can best help. We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can. |
Would be great if that could be solved. Currently I'm working around the issue like this: <Checkbox
required
name="termsAccepted"
// @ts-ignore: remove readonly attribute to enable browser validation
ref={(e) => e.inputRef.current?.removeAttribute('readonly')}
// ...
/> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Bug Report
Steps
The Checkbox control is hardcoded to always set
readOnly
on its Input, even if you don't pass thereadOnly
prop.This means the element is always in the readonly state, which causes HTML validation to always pass, even if the element is actually in an invalid state (e.g. being
required
).Expected Result
It should be possible to use
required
with a Checkbox component and have form validation and methods such ascheckValidity()
work correctly.Actual Result
Expected form validation does not occur because the element is in the readonly state. This allows a user to submit a form without checking a required value, even when you've set the
required
prop.Version
2.1.3
Testcase
https://codesandbox.io/s/semantic-ui-react-checkbox-is-always-readonly-oyeow5
The text was updated successfully, but these errors were encountered: