React: React copies default checkbox value to attributes

Created on 9 Jan 2018  路  4Comments  路  Source: facebook/react

Do you want to request a feature or report a bug?
Report a bug

What is the current behavior?
React sets value="on" (via attributes / defaultValue) on all inputs with type=checkbox and no value.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem. Your bug will get fixed much faster if we can run your code and it doesn't have dependencies other than React. Paste the link to your JSFiddle (https://jsfiddle.net/Luktwrdm/) or CodeSandbox (https://codesandbox.io/s/new) example below:
https://codesandbox.io/s/v6j4lqp1z3 (actual, React)
https://codesandbox.io/s/2vox3vozx0 (expected, vanilla DOM)

What is the expected behavior?
value attribute should be empty unless passed via props.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
React 15+, any browser.

DOM Needs Investigation

Most helpful comment

Sent with https://github.com/facebook/react/pull/12000. Lucky number 12000.

All 4 comments

cc @nhunzaker @aweary

I think this happens because the default value reported by checkboxes and radios is "on", in absence of a value property/attribute. Unfortunately, for ~16 our controlled text input code "detatches" value by assigning it over:

https://github.com/facebook/react/blob/edb2b3d3a70bbb6a26670673ac805df34ac23382/packages/react-dom/src/client/ReactDOMFiberInput.js#L264

We have some updates on master that prevent this, but I'll prep a test case for it and send it out. I'm also working on a PR that isolates the controlled checked and controlled value code to help prevent accidents like this in the future.

Sent with https://github.com/facebook/react/pull/12000. Lucky number 12000.

We now have a test to confirm that this works as intended on master. This should land in the next release of React.

Was this page helpful?
0 / 5 - 0 ratings