Material-ui: How to stop propagation of click event in nested components

Question

I have an IconMenu component inside a Paper component. I would like to prevent the propagation of the click event on the inner component (the IconMenu). That's what I came up with, without significant results (I also tried substituting onClick with onTouchTap, onMouseUp with same effects): the _iconMenuClick method is never called.

render() {
     return (
         <Paper onClick={this._onClick}>
             <IconMenu iconButtonElement={iconButtonElement} onClick={this._iconMenuClick}>
                 {menuItems}
             </IconMenu>
         </Paper>
     );
}

_iconMenuClick(event) {
    MenuItem.onClick(event);
    event.stopPropagation();
}

Answer 1

In addition to using event.stopPropagation(); It is useful to note that it should be written within a onClick event handler.

I made the mistake of writing it inside an onChange event handler, and that wasn't working.

I found that solution here

EDIT:

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