JedWatson / react-tappable

Tappable component for React
http://jedwatson.github.io/react-tappable/
MIT License
862 stars 90 forks source link

Stop Propagation for nested button #112

Closed nocksock closed 7 years ago

nocksock commented 7 years ago

I have a button inside of a tappable element that has an on click handler. How can I prevent tappable to be triggered when that button is clicked?

<Tappable onTap={()=>doSomething()}>
    <SomeComponentThatHasAButton />
</Tappable>

So inside of SomeComponentThatHasAButton is a button – but Tappable's onTap is still triggered. How to stop this?

NOTE: This also does not work if I change the button to a Tappable-Component.

mattcolman commented 7 years ago

if the inner button is a Tappable, just add the stopPropagation prop to prevent the tap propagating up to its parent. if the inner button is NOT a Tappable, then you'll need to call stopPropagation from the click event, and use https://github.com/ftlabs/fastclick to make sure it works on mobile.

nocksock commented 7 years ago

Awesome! This seems to have fixed it. Thanks.