Does not work with browser-sync

[queimadus]

Browser sync injects a extra blur(); focus(); to checkboxes and radios at the addEventListener level.
Resulting in the following sequence of events:

<Checkbox 
  checked={false}
  onBlur={e => console.log("blur", e.target.checked)}
  onFocus={e => console.log("focus", e.target.checked)}
  onChange={e => console.log("focus", e.target.checked)}
/>

- focus,  false
- blur,   true (added by browsersync)
- focus,  false (added by browsersync)
- change, false

When the onChange is called the e.target.chacked is no longer trueand thus the checkbox never toggles its state.

This only fails in 1.3.4 since the addition of onBlur and onFocus that change the component state.
If I comment out the setState lines from onBlur and onFocus it works correctly (albeit isFocused support is lost ofc)

[queimadus]

Codepen reproducing the issue:
http://codepen.io/anon/pen/PNvjxq

[ryannealmes]

I am trying to leverage this control in the react-slingshot framework.

It seems like a similar issue to this is cropping it's head up. I have forked the repo for slingshot and modified it to include the rc-checkbox control in the App component. If you do an npm install, npm start and try click the checkbox you will see that it doesn't change.

Any ideas on how to fix this? I have gone down this rabbit hole, but had no luck.

Happy to help out more if needed.

[kossel]

this bug is till in antd 2.6.4

[yiminghe]

we do not use browser-sync, but pr is welcomed