Material-ui: [ListItem] onTouchTap/onClick triggers check of leftCheckbox

[stremlenye]

<ListItem leftCheckbox={<Checkbox />}
  onTouchTap={::this.onTouched}>
    {text}
</ListItem>

In this case onTouched is never called but clicking on ListItem itself toggles checkbox checked state.
Removing Checkbox fix the problem.
Is it feature or bug?

[maksadbek]

I have the same problem

[shaurya947]

@stremlenye if you see this line of code, it seems like if you pass a checkbox, only a label is created (vs. an EnhancedSwitch with the onTouchTap prop).

I'm not sure if it's a _bug_ or not but I'm leaning towards this being intended behavior. Typically, if you put a checkbox in a list-item, you're more interested in the state of that checkbox vs. doing anything when that item is tapped. So I'll close this for now. But if you feel strongly about this, feel free to comment here and write up a PR -- and I'll re-open.

[seales]

From the documentation, the ListItem attribute disabled is automatically set to true if either leftCheckbox or rightToggle is set.

I would like to be able to override disabled, so that I can have listeners for both Checkbox and ListItem.

Thoughts?

[seales]

Found a workaround. See : http://stackoverflow.com/questions/39759223/material-ui-react-js-is-there-a-way-to-have-an-onclick-event-for-both-a-listite

<ListItem
  leftCheckbox={
    <Checkbox onClick={(e) => {
      e.stopPropagation(); // <--- important 

      // ... checkbox logic ...

    }}/>
  }
  onClick={() => {
      // ... list item logic ...
  }
/>

[NewOldMax]

@seales
Seems to in 0.19.0 your code isn't working (or maybe it's only I have problems with it). But I've found a solution:
````javascript
primaryTogglesNestedList={true} // <--- important
leftCheckbox={
e.stopPropagation(); // <--- important

  // ... checkbox logic ...

}}/>

}
onClick={() => {
// ... list item logic ...
}
/>
````
Warning: it adds hover effect (previously it wasn't)

[farfromrefug]

@NewOldMax I had the same issue. Thanks for the fix!