search

markusenglund / react-switch

A draggable toggle-switch component for React. Check out the demo at:
https://react-switch.netlify.com/
MIT License
1.33k stars 100 forks source link

When clicking on handler, click event propagates. #29

Closed yzaroui closed 5 years ago

yzaroui commented 5 years ago

Hello, I am using the switch inside a user component in a list. Clicking on the user component displays the user details.

switch in user component

What should happen: Clicking on the switch (handle included) should toggle an attribute on the user without showing the user details.

What happens instead: Clicking on the switch handle triggers displaying the user details (a callback on the user component).

Even when I add e.stopPropagation in the onChange callback, it still propagates.

This maybe related to issue 21 but the solution provided there did not fix this propagation issue.

markusenglund commented 5 years ago

Alright, I understand the problem - doesn't looks like there's a way to disable propagation without changing the components source code. I'm just wondering if there are some cases where you actually want to have event-propagation. It might be a little blunt to have it always disabled...

Shravan89131 commented 5 years ago

Hello, I am also facing the same issue. Does any have has a solution for this?

drownbes commented 5 years ago

@Shravan89131 Just wrap it with div and stop propagation on it.

<div onClick={e => e.stopPropagation()}>
<Switch>
</div>