升级后Table组件的checkbox选取失效

[weiq]

本地环境

• antd 版本: 1.8
• react 版本 15.2.1
• 操作系统及其版本：win7
• 浏览器及其版本: chrome

你做了什么？

升级antd从1.7到1.8，升级到1.9也有同样的问题。在1.7中一切正常

使用Table组件，官网上的第二个例子，加载成功后点击checkbox，结果选取无效，debug发现onChange回调函数中收到的为空数组

但用codepen模拟时又正常了，怀疑是否是在1.8中对Table的一些修改导致的问题。

[NsLib]

+1 1.7 mac下正常，升级后异常

[afc163]

给重现，codepen 中是 1.9 的。

[weiq]

找到原因发现是用browser-sync导致的，打包后正常。但1.7为什么就好使呢？

[daihy8759]

我也是使用了browser-sync ，然后所有checkbox的选中都不正常。看了dom结构，span元素就是没加上选中的样式，而且IE下是正常的，chrome不正常，一直找不出原因，感觉是事件问题

[afc163]

没有用过 browser-sync ，可以帮忙排查么？

[wmzy]

rc-checkbox 1.4.0没问题，1.4.1有这个问题，应该是因为加了onClick事件导致的。

[daihy8759]

@weiq 你现在那个是怎么解决的

[daihy8759]

的确是换成rc-checkbox 1.4.0没问题了,1.4.1增加onClick是为了解决什么问题吗？ @afc163

[afc163]

#2610

[weiq]

@dai875939260 我的办法也不是太好，通过配置Browsersync禁止注入脚本
snippetOptions: {
ignorePaths: "*"
}
如果你有更好的方法，请告诉我一下

[daihy8759]

@weiq 我是直接将rc-checkbox切换到1.4.0了,禁止注入脚本Browsersync是不是有些功能 不能用了？

[weiq]

@dai875939260 我暂时只用到它的热加载功能，这个是好使的，具体其它功能你可以上它的官网上了解一下。

[zengsizhang]

@weiq
我按照你的方法配置了，还是不行，有DEMO吗？谢谢

[afc163]

@dai875939260 为什么增加 onClick 会导致 browser-sync 的异常？

[kossel]

I just got the same problem.
had to disable browser-sync snippet injection to temporary fix it.

[cleverjam]

I am having the same issue, but I do need the browser sync feature for cross browser testing (this feature is required), are you guys planning on working on a fix any time soon?

[yesmeck]

Since we do not use browser-sync, if someone can provide a repo with browser-sync setup, I'll look into this issue.

[kossel]

Hello I have created a demo project in

https://github.com/kossel/playground

antd: 2.6.4
browser-sync: 2.18.5

Steps to reproduce:

Clone the project
npm install
npm start

It will start with browsersync in dev environment
you will notice the checkbox can not be checked

Browsersync will inject this client so all the browser tabs will be sync'ed
https://github.com/BrowserSync/browser-sync-client/blob/master/dist/index.js

but looks something has conflicts with the checkbox

[wmzy]

可以通过禁用browser-sync 的 ghostMode 临时解决问题：

          bs.init({
            // disable for https://github.com/ant-design/ant-design/issues/2744
            ghostMode: false,

            // ......
          });

当然，这不是最终的解决方案......

[benjycui]

@dai875939260 @afc163 this problem is introduced by react-component/checkbox@ecb79f8 , not onClick.

[benjycui]

And I don't think it's a bug introduced by rc-checkbox.

Actually, it's just browser-sync cannot work well with rc-checkbox...

[benjycui]

It seems that the issue is from browser-sync

Before we inject browser-sync-client:

After:

For browser-sync-client will trigger onFocus and onBlur programmatically, and this will break rc-checkbox's lifecycle. And then, e.target.checked from onChange of input[type=checkbox] will always be false.

This is why we cannot check an antd.Checkbox after using browser-sync.

[benjycui]

Of course we can refactor rc-checkbox to avoid browser-sync's issue.

But, the best solution is fix this in browser-sync, for other component which is based on onFocus and onBlur will meet this problem, too.

[benjycui]

I am not sure whether we need to refactor rc-checkbox and find a new way to save focused state @afc163

But I think this issue can be close now. And hope someone who are familiar with browser-sync's community will create an issue in repo of browser-sync, thanks.

[benjycui]

After discussion, we will try to refactor rc-checkbox, but you had better create issue in repo of browser-sync

[lock]

This thread has been automatically locked because it has not had recent activity. Please open a new issue for related bugs and link to relevant comments in this thread.