Checked attribute not realizing in DOM

[colindresj]

Recently updated to 0.12.2 and a checkbox element hooked up to this.props is dynamically updating in the browser. Using the React inspector for Chrome, this.props.item.isActive seems to be toggling fine, but for some reason the changes don't propagate into the DOM. Not sure if this is specific to the update, or I've messed something up that I don't realize.

Here's my render function:

render: function() {
  let className = '';
  if (this.props.item.isActive) className = 'is-active';

  return (
    <li className={className}>
      <div className="view">
        <input
          className="toggle"
          type="checkbox"
          checked={this.props.item.isActive}
          onChange={this.toggleActive}
        />
        <span>{this.props.item.text}</span>
        <button className="destroy-item" onClick={this.destroyItem}></button>
      </div>
    </li>
  );
}

[waldreiter]

Your <input> is a controlled component that gets the value for checked from the props. But the onChange event calls a function within the component itself, which usually means it does not alter the props. My guess is using defaultChecked will solve your problem:

defaultChecked={this.props.item.isActive}

I hope this helps, otherwise please give more information. Usually the best way for this is to make a minimal repo case on jsfiddle: http://jsfiddle.net/reactjs/69z2wepo/

[colindresj]

I read up on the docs for controlled components and tried using defaultChecked, but didn't seem to fix the issue for me. Here's a fiddle: http://jsfiddle.net/wwgfrj6g/

[waldreiter]

Thanks for the fiddle. Here I made some changes: http://jsfiddle.net/wwgfrj6g/2/

The main fix was to remove preventDefault() from the event handler. Maybe one of the devs can explain why preventDefault() breaks it?

[colindresj]

Really interesting find @cody. Thanks for the help

[zpao]

This is because we actually use the click event for checkboxes in our attempt to normalize the change handling. preventDefault actually makes the browser not visually update, even if it is actually toggling checked. You may actually want to use stopPropagation instead, depending on what you're trying to achieve.

Here's the minimal example duplicating what's happening, in pure JS: http://jsbin.com/ludogufaqu/1/edit?js,console,output (fun fact, putting the node.checked toggle in a setTimeout will make this work).

Now about why the browser acts like this, I don't know :/

[colindresj]

Very interesting @zpao, thanks for the insight. Good to know that onChange for checkboxes actually fires a click event. Is that documented anywhere?

[zpao]

No, its an implementation detail that you shouldn't have to worry about, but sometimes it becomes slightly relevant.

[colindresj]

Sounds good, thanks for the help