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
Post a Comment for "Stop Parent Component Ripple Being Triggered From Child Component"