Unable to stop event propagation from checkbox inside a listitem

[DuskLoop]

• This is a v1.x issue (v0.x is no longer maintained).
• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

I have the following component:

class ListItemWithCheckbox extends React.Component<{}> {
  handleListItemClick = (event: React.MouseEvent<HTMLElement>) => {
    console.log("list item clicked");
  };

  handleCheckboxChange = (event: React.ChangeEvent<HTMLElement>) => {
    event.stopPropagation();
    console.log("checkbox changed");
  };

  render() {
    return (
      <ListItem button onClick={this.handleListItemClick}>
        <Checkbox onChange={this.handleCheckboxChange} />
      </ListItem>
    );
  }
}

When i click the checkbox i expect only handleCheckboxChange to be called.

Current Behavior

Both handleCheckboxChange and handleListItemClick are called.

Steps to Reproduce (for bugs)

Code sandbox link

1. Click in the checkbox

Your Environment

Tech	Version
Material-UI	v1.2.0
React	v16.4.0
browser	Chrome v 67.0.3396.87

[oliviertassinari]

@DuskLoop The change and click event are two different events! This does the trick:

      <ListItem button onClick={this.handleListItemClick}>
-       <Checkbox onChange={this.handleCheckboxChange} />
+       <Checkbox onClick={this.handleCheckboxChange} />
      </ListItem>

[support]

👋 Thanks for using Material-UI!

We use the issue tracker exclusively for bug reports and feature requests, however,
this issue appears to be a support request or question. Please ask on StackOverflow where the
community will do their best to help. There is a "material-ui" tag that you can use to tag your
question.

If you would like to link from here to your question on SO, it will help others find it.
If your issues is confirmed as a bug, you are welcome to reopen the issue using the issue template.