Stop Parent Component Ripple Being Triggered From Child Component

Let's say I have a simple code like: {value}

Solution 1:

Use event.stopPropagation() inside the click handler of the button. In your case, inside the foo() function

Solution 2:

You can try to use disableRipple property of ListItem. Set it to true when clicking on button and set it to false when clicking on list item, something like:

constfoo = () => this.setState(prevState => ({
  ...prevState,
  parentDisableRipple: true
}));
constenableRipple = () => this.state.parentDisableRipple && this.setState(prevState => ({
  ...prevState,
  parentDisableRipple: false
}));

return (
  <div><Helloname={this.state.name} /><p>
      Start editing to see some magic happen :)
    </p><ListItembutton={true}disableRipple={this.state.parentDisableRipple}onClick={enableRipple()}><Typographyvariant='caption'color='primary'>
        {value}
      </Typography><ButtononClick={foo} >Button</Button></ListItem></div>
);

I created a STACKBLITZ to play with

UPDATE

There is a better solution by @Domino987 using onMouseDown and event.stopPropagation() (already mentioned here by @vasanthcullen) and <ListItemSecondaryAction> wrapper.

I updated my STACKBLITZ with both these solutions

Share