Add some way to specify indeterminate checkboxes

[sophiebits]

There should be a way do do <input type="checkbox" indeterminate={true} /> or similar – right now the attribute is ignored. Need to figure out how this interacts with checked though.

[zpao]

https://mdn.mozillademos.org/en-US/docs/Web/CSS/:indeterminate$samples/Example?revision=601267 is fun to play with.

Not impossible to support, but that's annoying.

[sophiebits]

Sorry, what's annoying?

[zpao]

The correct combination of indeterminate and checked. (eg indeterminate=true and checked=true is impossible, indeterminate=true and checked=false is ok edit, even when you explicitly say checked=false)

[dmitry]

I have the same issue. Is there are any ability to set indeterminate property for the checkbox within React?

Found the solution:

  componentDidMount: ->
    $('input', this.getDOMNode()).prop({
      indeterminate: true,
      checked: false
    })

or just a react version:

  componentDidMount: ->
    checkbox = this.refs.checkbox.getDOMNode()
    checkbox.indeterminate = true
    checkbox.checked = false

But what are the drawbacks, except the jquery/zepto are used in this example?

Isn't in that case an element will be always be rerendered?

[zpao]

The drawback is that your are mutating the DOM manually, which kinda sucks. You also want to make sure this happens in the right place for each subsequent render.

[dmitry]

You also want to make sure this happens in the right place for each subsequent render.

How to make sure?
And as I understand componentDidMount happens after virtual DOM is placed in a real DOM. Between rendering to the real DOM and changing the input it may take some time. In some situations browser reflow can be done few times?

[zpao]

Well, on a re-render componentDidMount will not get called so you also need to do it in componentDidUpdate to make sure it happens there if needed.

[azich]

Pulling in my research from #2973 (and reviving this thread):

Chrome, Firefox, Safari, IE and other modern browsers support the notion of a checkbox in an indeterminate state which can be set or cleared using the indeterminate property of a checkbox input node. (It cannot be set using attributes.)

This state is most commonly used at the top of a list or tree of checkboxes to indicate that some but not all of the checkboxes underneath are checked.

This behavior seems reasonably well-defined in modern Chrome, Firefox, Safari, and IE. If the checkbox's indeterminate property is set, the checkbox renders its indeterminate state regardless of what its checked state is (or if its checked state is programmatically toggled) and clicking on a checkbox clears its indeterminate state.

Unfortunately there is a little bit of inconsistency. In Chrome, Firefox, and Safari clicking an indeterminate checkbox clears the indeterminate state and also toggles the checked state (triggering both a change and click event) while in IE it just clears the indeterminate state and leaves the checked state alone (triggering only a click event).

• Should React support an indeterminate prop for checkbox inputs?
• Should it be supported for uncontrolled checkboxes (via an defaultIndeterminate or similar prop)?
• Should clicking an indeterminate checkbox follow the browser's checked-toggling behavior?

[Claims above come from playing with this jsFiddle in Chrome 40, Firefox 35, Safari 7, and IE 11]

[sophiebits]

Maybe we should do checked equal to true, false, or 'indeterminate'? :\ I am clearly an API design genius.

[azich]

If you have one checkbox that's checked and one checkbox that's not checked, put both of them in an indeterminate state then click both of them, the two checkboxes will have opposite checked states in all of the browsers listed above. This means there are still two distinct bits of information, at least in the browser's implementation.

[sophiebits]

Ooh, good find.

[jlas]

checked should be either true/false

indeterminate should be either true/false

if indeterminate === true and checked state is updated, indeterminate becomes false

http://www.w3.org/TR/2014/WD-html51-20140617/forms.html#checkbox-state-(type=checkbox)