Stop parent component ripple being triggered from child component


Let’s say I have a simple code like:

  <Typography variant='caption' color='primary'>

When I click anything inside the ListItem the ripple effect is trigger, which is ok, but when I click the button I don’t want the ripple effect of the parent component to be triggered. How do I do that?


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:

const foo = () => this.setState(prevState => ({
  parentDisableRipple: true
const enableRipple = () => this.state.parentDisableRipple && this.setState(prevState => ({
  parentDisableRipple: false

return (
    <Hello name={} />
      Start editing to see some magic happen :)

    <ListItem button={true} 
      <Typography variant='caption' color='primary'>
      <Button onClick={foo} >Button</Button>

I created a STACKBLITZ to play with


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

Answered By – Andriy

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published