Let's say I have a simple code like:

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

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 ponent to be triggered. How do I do that?

Let's say I have a simple code like:

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

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 ponent to be triggered. How do I do that?

• javascript
• css
• reactjs
• material-ui
• dom-events

Share Follow edited Jun 5, 2019 at 8:42 Brian Tompsett - 汤莱恩 5,8937272 gold badges6161 silver badges133133 bronze badges asked Jun 4, 2019 at 16:23 LekLek 1371212 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

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 => ({
  ...prevState,
  parentDisableRipple: true
}));
const enableRipple = () => this.state.parentDisableRipple && this.setState(prevState => ({
  ...prevState,
  parentDisableRipple: false
}));

return (
  <div>
    <Hello name={this.state.name} />
    <p>
      Start editing to see some magic happen :)
    </p>

    <ListItem button={true} 
              disableRipple={this.state.parentDisableRipple}
              onClick={enableRipple()}>
      <Typography variant='caption' color='primary'>
        {value}
      </Typography>
      <Button onClick={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

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

<ListItem button={true} matRipple #parent>
 <Typography variant='caption' color='primary' matRipple [matRippleTrigger]="parent"
   [matRippleDisabled]="true">
    {value}
 </Typography>
 <Button onClick={foo}>
    Button
 </Button>
</ListItem>

You need something like this: Add Template variable that element which should be animated. And trigger parent ripple by children with [matRippleTrigger] option.