When customizing the label, there is a problem when n-select is selected

[XieZongChen]

TuSimple/naive-ui version (版本)

2.15.1

Vue version (Vue 版本)

3.1.3

Browser and its version (浏览器及其版本)

Chrome(89.0.4389.128)

System and its version (系统及其版本)

MacOS(11.2.3)

Node version (Node 版本)

Reappearance link (重现链接)

https://codesandbox.io/s/headless-leaf-kw7tc

Reappearance steps (重现步骤)

select

Expected results (期望的结果)

fix bug

Actual results (实际的结果)

fix bug

Remarks (补充说明)

Thanks to Matteo Gazzoni of the discord community

[Ashiria7]

It happend because the render function of Selection component render the label as string or just this.label which get by selectedOption. The problem can be solved easily when not filterable (this is mentioned in the document, if you are using render function, the default filter will filter the option). But when it can be filterable and not multiple, it seems hard to render the label properly. So in the document, there is a render property, you can use render combine with label to realize the customize label. And the filterable can works well. So I think this problem cannot be labeled as a bug. This is my demo https://codesandbox.io/s/cranky-shape-0rdqc?file=/src/Demo.vue. The most difficult is control the style of your customize options.

[07akioni]

It happend because the render function of Selection component render the label as string or just this.label which get by selectedOption. The problem can be solved easily when not filterable (this is mentioned in the document, if you are using render function, the default filter will filter the option). But when it can be filterable and not multiple, it seems hard to render the label properly. So in the document, there is a render property, you can use render combine with label to realize the customize label. And the filterable can works well. So I think this problem cannot be labeled as a bug. This is my demo https://codesandbox.io/s/cranky-shape-0rdqc?file=/src/Demo.vue. The most difficult is control the style of your customize options.

You explaination is correct, there is a workaround. We are trying to make label render function works for select input.