search

aaronshaf / react-toggle

Elegant, accessible toggle component for React. Also a glorified checkbox.
http://aaronshaf.github.io/react-toggle/
MIT License
945 stars 159 forks source link

Add a readOnly prop #155

Closed tremby closed 4 years ago

tremby commented 4 years ago

The HTML input element's readonly attribute is different from the disabled attribute: a read-only control and its contents will still be visible (to everyone, including screen reader users) and will still submit its value along with the form.

I wasn't sure how to style this. I decided at least for now to style it the same as "disabled" in terms of transparency and the "not-allowed" cursor, but still allow focus etc.

This PR is based on https://github.com/aaronshaf/react-toggle/pull/154 since it touches some of the same code. As a result, the same gotcha I mentioned in that PR is present here: the tests for not being able to change a toggle via touch when it's disabled or read-only pass when the code preventing this is disabled, i.e. they will not correctly detect a regression.

tremby commented 4 years ago

Well. I now find out that readonly doesn't actually do anything on checkboxes.

A note on the article on MDN's readonly section says

Only text controls can be made read-only, since for other controls (such as checkboxes and buttons) there is no useful distinction between being read-only and being disabled, so the readonly attribute does not apply.

I don't see how this is correct, given that a read-only control still submits its value (so a checked, read-only checkbox ought to submit its value) whereas a disabled one does not. Still, that's how it is. There's discussion here: https://github.com/whatwg/html/issues/2311

This likely makes this PR moot.