Checkbox control always sets the "readonly" attribute, which disables form validation

ilmiont commented 1 year ago

Bug Report

Steps

The Checkbox control is hardcoded to always set readOnly on its Input, even if you don't pass the readOnly 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 as checkValidity() 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

welcome[bot] commented 1 year ago

👋 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.

maltesa commented 1 year ago

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')}
  // ...
/>

Semantic-Org / Semantic-UI-React