New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Select 组件 在mode 为tags的情况下,以‘,’ 来分词之后不会触发onSelect 事件,只会触发 onChange事件 #9094

Closed
sillyfeng opened this Issue Jan 23, 2018 · 19 comments

Comments

Projects
None yet
5 participants
@sillyfeng

sillyfeng commented Jan 23, 2018

Version

3.1.0

Environment

chrome52

Reproduction link

https://codepen.io/sillyfeng/pen/WdWoKv

Steps to reproduce

1、打开连接
2、随便输入什么数据,以逗号来分词
3、查看 console 日志

What is expected?

期望的结果是在以逗号分词的时候,会触发 onSelect事件,但是现在并不会,只有输入按下Enter键,才会触发onSelect事件

What is actually happening?

期望的结果是在以逗号分词的时候,会触发 onSelect事件,但是现在并不会,只有输入按下Enter键,才会触发onSelect事件

@ant-design-bot

This comment has been minimized.

ant-design-bot commented Jan 23, 2018

It will be better to write your issue/comment in English, so more people can understand you.
And this means that more people can help you or benefit from your issue/comment.
See: #4897

@yesmeck

This comment has been minimized.

Member

yesmeck commented Jan 24, 2018

目前的设计就是这样的,实际使用中会有什么问题?

@sillyfeng

This comment has been minimized.

sillyfeng commented Jan 24, 2018

我这边有一个场景是会用到 onSelect事件,在每次有Select内容的时候会改变另一个table的内容
其实,以“,” 来分词的时候,也是标识这条选项是被select的状态,你下拉列表的时候发现那条也是选中的状态,但是他不会触发onSelect 。只有enter的时候会触发onSelect,这样的话其实他俩做的是同样的事情,应该会有同样的反馈才行。现在这样我觉得是不太合理了的吧。。

@yesmeck

This comment has been minimized.

Member

yesmeck commented Jan 24, 2018

@sillyfeng onChange 不行吗?最好用 https://u.ant.design/codesandbox-repro 给个例子。

@sillyfeng

This comment has been minimized.

sillyfeng commented Jan 24, 2018

@yesmeck 在问题描述里的那个连接: https://codepen.io/sillyfeng/pen/WdWoKv 是对刚刚我说的这个现象的描述,不过需要F12 打开控制台看一下结果。
onChange的话,他是把所有的选中项都列出来了,这样我得判断那条是新增的,就有很多额外重复的不必要的工作

-操作步骤

  1. 打开 https://codepen.io/sillyfeng/pen/WdWoKv ,然后在输入框中输入 任意词 ,点击 enter, 查看控制台会有 (onSelect 和onChange的输出)

  2. 在输入框中输入 任意词,然后点击 “逗号” ,查看控制台,只有onChange的输出,没有onSelect

@yesmeck

This comment has been minimized.

Member

yesmeck commented Jan 24, 2018

@sillyfeng 是的,这个是预期的行为。我是指你最好示范一下你的应用场景,说明一下为什么这里一定要用 onSelect,不能用 onChange。

@sillyfeng

This comment has been minimized.

sillyfeng commented Jan 24, 2018

@yesmeck 我明白你意思了, 我大致描述一下
1、 每次 onSelect 触发的时候,我会 往 table 的data 里面push一条数据 。
2、 table的Data 数据也可以自行页面维护
3、 如果用onChange, 我就需要判断哪条是新增的,其实也可以认为 最后一条就是新增的对吧
4、 但是同样会有onDeselect 事件的处理,这样onChange 就会有局限。我不知道是该新增还是该删除。

@yesmeck

This comment has been minimized.

Member

yesmeck commented Jan 24, 2018

嗯,确实需要触发 onSelect

@sillyfeng

This comment has been minimized.

sillyfeng commented Jan 24, 2018

@yesmeck 那如果这个是一个预期行为,那我就限制用户必须输入之后使用enter吧。

@yutingzhao1991

This comment has been minimized.

Contributor

yutingzhao1991 commented Jan 24, 2018

这个算是一个 bug 吧,就是在用 ',' 触发添加一项的时候没有触发 onSelect

@yutingzhao1991

This comment has been minimized.

Contributor

yutingzhao1991 commented Jan 26, 2018

有一个问题要讨论下,onSelect 是有第二个参数的:

image

在通过 ',' 触发 onSelect 的情况这个参数应该给什么呢?

@yesmeck

This comment has been minimized.

Member

yesmeck commented Jan 26, 2018

我一开始对 onSelect 的理解就是在点击一个 Option 选中后才触发,但是自动分词的结果是没有 Option 的,所以不触发 onSelect。另外这里的 option 其实也不是原来的 <Option />,而是 Menu.Item 的实例。

@yesmeck

This comment has been minimized.

Member

yesmeck commented Jan 26, 2018

如果传 option 的话,只能 createElement 一个 Ment.Item, 很别扭,跟手选的不是一个东西。

@yesmeck

This comment has been minimized.

Member

yesmeck commented Jan 26, 2018

可以跟这个 issue #4597 一起来考虑,是不是把参数里的 option 全部统一成 Optionelement

@sillyfeng

This comment has been minimized.

sillyfeng commented Jan 26, 2018

@yesmeck 但是你手动添加一个option点击enter按钮的时候,是有触发onSelect的。像enter这种情况下本身也是没有option的。 他们(“,”分词 和 点击enter键进行分词 )做的事情应该是一样的吧,可以把第二个参数设置成同样的吗

@yesmeck

This comment has been minimized.

Member

yesmeck commented Jan 26, 2018

enter 就是选中当前选中项

@sillyfeng

This comment has been minimized.

sillyfeng commented Jan 26, 2018

老铁这么晚还没有睡觉啊。我站在一个没有考虑太多细节的情况下来说, 感觉enter和','分词是一样的情况
点击enter之前select里的children里没有当前要输入的内容的,然后你输入内容,点击enter之后的情况是select里加了一条option,并且处于选中状态,
“,”分词感觉和这个情况一样,就是同样是再分词之前,select的children里没有内容,在输入内容,点击“,” 之后,select里加了一条option,并且处于选中状态,其实从结果来看,他和点击enter键没有区别。

@yutingzhao1991

This comment has been minimized.

Contributor

yutingzhao1991 commented Jan 29, 2018

嗯,传 Option 可以,但是这样就是一个 breakChange 了。

@yesmeck 不考虑兼容吗?版本应该怎么升?

@yesmeck

This comment has been minimized.

Member

yesmeck commented Jan 29, 2018

应该不会 break,因为用起来是一样的,都是 option.props,而且文档里写的就是 Option。

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment