Skip to content
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

Allow to add custom node before or after select items #10831

Closed
ybning opened this issue Jun 7, 2018 · 23 comments
Closed

Allow to add custom node before or after select items #10831

ybning opened this issue Jun 7, 2018 · 23 comments
Assignees
Labels

Comments

@ybning
Copy link

@ybning ybning commented Jun 7, 2018

  • I have searched the issues of this repository and believe that this is not a duplicate.

What problem does this feature solve?

有这样一个场景:单位Select,在选项下可以放组件,如:按钮——“新增”。
如图:
select

What does the proposed API look like?

Select,在选项下区域,可以允许自定义组件,有考虑支持这样吗?

@rainke
Copy link

@rainke rainke commented Jun 7, 2018

让产品改需求吧,比如把新增按钮放下拉框后边

@ybning
Copy link
Author

@ybning ybning commented Jun 7, 2018

@rainke
”用户在Select下拉项中没有找到想要的项,直接在下拉项的视线内,点击新增,方便操作,保证了操作的连贯性。新增放到外面,跳出了下拉项的视线,在一定程度上,中断了操作,体验不好!“——援引自xx产品

@chenshuai2144
Copy link
Contributor

@chenshuai2144 chenshuai2144 commented Jun 8, 2018

你可以组合一个,我们 antd 是组件。这个已经是业务或者产品了

@afc163
Copy link
Member

@afc163 afc163 commented Jun 8, 2018

感觉可以提供类似 dropdownRender(menu) => ReactNode 的东西。

@chenshuai2144
Copy link
Contributor

@chenshuai2144 chenshuai2144 commented Jun 8, 2018

新增再谈一个表单? 我感觉这个我们做不合适

@afc163
Copy link
Member

@afc163 afc163 commented Jun 8, 2018

用户做什么不管,提供的是前后插入自定义 node 的能力。

@ybning
Copy link
Author

@ybning ybning commented Jun 8, 2018

用户做什么不管,提供的是前后插入自定义 node 的能力。

@afc163 good!

@ybning
Copy link
Author

@ybning ybning commented Jun 21, 2018

这是遇到的类似场景:
gif
@chenshuai2144 @afc163

@chenshuai2144
Copy link
Contributor

@chenshuai2144 chenshuai2144 commented Jun 21, 2018

这个是级联框吧

@ybning
Copy link
Author

@ybning ybning commented Jun 21, 2018

像类似这种Select衍生交互,还是希望Select有插入自定义node的能力。

@afc163 afc163 changed the title 关于Select的一个优化 Allow to add custom node before or after select items Jun 23, 2018
@chillyistkult
Copy link
Contributor

@chillyistkult chillyistkult commented Aug 31, 2018

@afc163 Any decision on the topic as you closed both issues? I think it's very useful and commonly supported by many other select libraries.

https://react-select.com/creatable does it perfectly.

@afc163
Copy link
Member

@afc163 afc163 commented Aug 31, 2018

It is not closed.

I am indented to solution of #10831 (comment)

Welcome to help us and send us PR~

@m1n0s
Copy link

@m1n0s m1n0s commented Sep 3, 2018

Hi @afc163!
Any chances it'll be available in closest week or two? I assume you haven't started developing this feature yet. So if I'll add PR for that what could be ETA of fix to be available for using?

Are there any possible workarounds to add button before options?

Sorry for messy questions but I need this feature ASAP.

Thank you!

@zombieJ
Copy link
Member

@zombieJ zombieJ commented Sep 3, 2018

下拉新增感觉可以这么做? https://codesandbox.io/s/v87kr0mlyy

@zombieJ
Copy link
Member

@zombieJ zombieJ commented Sep 3, 2018

@m1n0s , I guess you can combine cascader with the sample above to do as the workaround

@m1n0s
Copy link

@m1n0s m1n0s commented Sep 3, 2018

@zombieJ thank you and I can even add custom styling because Option propagates className to li element. But the problem that Select decorated with getFieldDecorator which has own onChange and I don't know the way how to catch it earlier or stop propagation to decorated onChange unfortunately.

@m1n0s
Copy link

@m1n0s m1n0s commented Sep 4, 2018

@zombieJ eventually your sandbox example helps me made the magic. Thank you!
image

Code example to all who reach this issue:

<Select
  mode="multiple"
  dropdownClassName="select-with-button"
  value={value}
  onDeselect={this.handleDeselect}
  onSelect={this.handleSelect}
>
  <Option key={ADD_NEW_ITEM} className="custom-class-for-option">
    <Button type="primary" icon="plus">
      add new item
    </Button>
  </Option>
  {
	options.map((id) => <Option key={id}>{name}</Option>)
  }
</Select>

and within handleSelect method all magic done with if (key === ADD_NEW_ITEM) {.

zombieJ added a commit to react-component/select that referenced this issue Nov 26, 2018
zombieJ added a commit that referenced this issue Nov 26, 2018
close #10831
afc163 added a commit that referenced this issue Nov 27, 2018
close #10831

close #7988

close #13151

close #11225

close #9888
@afc163
Copy link
Member

@afc163 afc163 commented Nov 27, 2018

@afc163 afc163 closed this Nov 27, 2018
@jackton1
Copy link

@jackton1 jackton1 commented Apr 15, 2019

This seems to be broken when the button is clicked the dropdown closes for cases where the select is placed inline with other inputs.

Screen Shot 2019-04-15 at 3 30 38 PM

@m1n0s
Copy link

@m1n0s m1n0s commented Apr 16, 2019

@jackton1 please take a look to #13504

@demirhancosku
Copy link

@demirhancosku demirhancosku commented Jan 8, 2020

https://codesandbox.io/s/antdselectaddoption-7fov7

Still not perfect.

I just forked your code-sandbox and refactored it for my use-case. It's worked enough to meet my needs :)

https://codesandbox.io/s/antd-select-add-option-cr6ii

@theoomoregbee
Copy link

@theoomoregbee theoomoregbee commented Mar 24, 2020

@demirhancosku used your fork updated(used hooks) it to work like react-select creatable

Codesandbox

Edit modifiedAntd-select

creatable-select

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet