Why does React copy default checkbox value to attributes?

Question

In this example you see a simple React element (an <input>) which does not have any properties except type and id, it is rendered into a root element (<div id=root>) using react-dom. For some reason both defaultValue and value get initialised with 'on' on the actual DOM element. Why does this happen? Is this a bug I should report?

const React = require('react');
const ReactDOM = require('react-dom');

const checkboxNoValue = React.createElement('input', {
  type: 'checkbox',
  'id': 'checkboxElement'
});

ReactDOM.render(checkboxNoValue, root);

console.assert(
  checkboxElement.value === 'on',
  'value should return "on" by HTML spec, instead got: '
  + JSON.stringify(checkboxElement.value)
) // this works fine

console.assert(
  checkboxElement.getAttribute('value') === null,
  'value attribute should be empty, instead got: '
    + JSON.stringify(checkboxElement.getAttribute('value'))
)
console.assert(
  checkboxElement.defaultValue === '',
  'defaultValue should be empty, instead got: '
    + JSON.stringify(checkboxElement.defaultValue)
)

EDIT

In first edit of the question I assumed that .value property of HTMLInputElement also should be empty; this is not true, it actually must return 'on' if not set otherwise: https://html.spec.whatwg.org/#dom-input-value-default-on

Unknown Unknown · Accepted Answer · 2018-01-09T16:33:02

This is not an issue with React itself. This is how the browser behaves by default.

From MDN:

If the value attribute was omitted, the default value for the checkbox is on.

Full info about the checkbox element: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox

Why does React copy default checkbox value to attributes?

2 Answers