Toggle causes onClick handlers in parent to be called twice

[broofa]

Use toggle inside a DOM structure that has an onClick handler. E.g.:

<label onClick={alert}>
  <Toggle />
  <span>Some Text</span>
</label>

Click outside the Toggle - e.g. on the span = one alert (as expected)
Clicking on the Toggle = two alerts

I believe the issue is that in addition to expected event bubbling, Toggle is generating a second event.
Inserting event.stopPropagation() around line 34 fixes the problem.

Edit: Note that because this is generating two distinct events there isn't a simple way to ignore one of the events. ☹️

[bradennapier]

Yeah I am running into this as well. I dont want to use the onclick of react-toggle itself and send it readOnly yet the event still occurs twice.

[bradennapier]

@broofa I built a flow-based fork of this which also fixes the issue

https://github.com/Dash-OS/react-toggle-2

yarn add react-toggle-2

[nivnahmias]

Would love to see a fix for this issue...

[broofa]

Pretty clearly not gonna get fixed. Am tired of seeing this in my issues list.