Allow to add custom node before or after select items

[ybning]

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

What problem does this feature solve?

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

What does the proposed API look like?

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

[rainke]

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

[ybning]

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

[chenshuai2144]

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

[afc163]

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

[chenshuai2144]

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

[afc163]

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

[ybning]

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

@afc163 good！

[ybning]

这是遇到的类似场景：

@chenshuai2144 @afc163

[chenshuai2144]

这个是级联框吧

[ybning]

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

[chillyistkult]

@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]

It is not closed.

I am indented to solution of #10831 (comment)

Welcome to help us and send us PR~

[m1n0s]

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]

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

[zombieJ]

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

[m1n0s]

@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]

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

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) {.

[afc163]

e1d3d2b

[jackton1]

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

[m1n0s]

@jackton1 please take a look to #13504

[gtaranti]

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

Still not perfect.

[demirhancosku]

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]

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

Codesandbox