Checkbox: onChange called multiple times in a row

[MrSauceman]

I found that the Checkbox element calls its onChange event several times each time you check or uncheck the box. It has something to do with the label that is generated alongside the checkbox because when I manually remove the label from the html, the call is only made once.

https://codesandbox.io/s/34vrxvlwqp

That link reproduces the issue if you check the console. Notice how the number of times onChange is called varies for each checkbox because of its props. For instance, adding an id prop to the Checkbox and clicking its label causes it to call its onChange event 3 times, while clicking the actual checkbox causes onChange to be called twice. I believe this has something to do with the <label for="id">Label</label>. The number of times called varies based on whether you click the actual checkbox or the label.

Seems very inconsistent and you can see that checkbox 3 in the demo cannot even set its value correctly when you click its label because onChange is called 3 times.

[HariSoni87]

We had a same problem and we have resolved it using a wrapper component.

const CheckBoxComponent = props => {
const { onChange, id, ...rest } = props
return (<Checkbox {...rest} onChange={(e, data) => onChange(e, { ...data, id })} />)
};

[jkudish]

Having the same issue with 0.77.1 -- not a problem in 0.76.0

[yoshatest]

I've got a similar problem on Radio (no label). Clicking fires events twice 1) checked=true, 2) checked=false, result in no toggle at all. Reverting to 0.76.0 fixes the problem.

[ghost]

Added a PR, Hopefully it solves the issue 👍

[ericbock]

I'm also seeing the change handler being called twice. Thinking that it might be related to the component binding both onChange and onClick to the same handler, I tested focusing the checkbox and toggling with the spacebar. That seems to work; my change handler is only called once per toggle.

[levithomason]

Fixed in #2392