fix(select): fix NSelect bug in using custom label (#382)

* fix(select): fix NSelect bug in using custom label

* feat: optimization

* feat: optimization

* feat: fix changelog

* Apply suggestions from code review

Co-authored-by: 07akioni <07akioni2@gmail.com>

CHANGELOG.en-US.md

@@ -2,6 +2,9 @@
 
 ## Pending
 
+
+- Fix `n-select` bug in using custom label, closes [#352](https://github.com/TuSimple/naive-ui/issues/352).
+
 ### Feats
 
 - `n-tree` exports `TreeDragInfo` & `TreeDropInfo` type.

CHANGELOG.zh-CN.md

@@ -2,6 +2,8 @@
 
 ## Pending
 
+- 修复 `n-select` 自定义 label 的显示问题，关闭 [#352](https://github.com/TuSimple/naive-ui/issues/352)
+
 ### Feats
 
 - `n-tree` 导出 `TreeDragInfo` & `TreeDropInfo` 类型

src/_internal/selection/src/Selection.tsx

@@ -20,12 +20,13 @@ import { NPopover } from '../../../popover'
 import { NTag } from '../../../tag'
 import { useTheme } from '../../../_mixins'
 import type { ThemeProps } from '../../../_mixins'
-import { createKey, getTitleAttribute } from '../../../_utils'
+import { createKey, getTitleAttribute, render } from '../../../_utils'
 import Suffix from '../../suffix'
 import { internalSelectionLight } from '../styles'
 import type { InternalSelectionTheme } from '../styles'
 import { RenderTag } from './interface'
 import style from './styles/index.cssr'
+import type { RenderLabel, RenderLabelImpl } from '../../select-menu/src/interface'
 
 export interface InternalSelectionInst {
   focus: () => void
@@ -83,7 +84,8 @@ export default defineComponent({
     onDeleteOption: Function,
     maxTagCount: [String, Number] as PropType<number | 'responsive'>,
     onClear: Function as PropType<(e: MouseEvent) => void>,
-    onPatternInput: Function as PropType<(e: InputEvent) => void>
+    onPatternInput: Function as PropType<(e: InputEvent) => void>,
+    renderLabel: Function as PropType<RenderLabel>
   },
   setup (props) {
     const patternInputMirrorRef = ref<HTMLElement | null>(null)
@@ -115,7 +117,7 @@ export default defineComponent({
     })
     const filterablePlaceholderRef = computed(() => {
       return props.selectedOption
-        ? props.selectedOption.label
+        ? render(props.selectedOption.label, props.selectedOption, true)
         : props.placeholder
     })
     const labelRef = computed(() => {
@@ -354,6 +356,7 @@ export default defineComponent({
       updateCounter,
       getCounter,
       getTail,
+      renderLabel: props.renderLabel as RenderLabelImpl,
       cssVars: computed(() => {
         const { size } = props
         const {
@@ -466,7 +469,8 @@ export default defineComponent({
       maxTagCount,
       bordered,
       clsPrefix,
-      renderTag
+      renderTag,
+      renderLabel
     } = this
     const maxTagCountResponsive = maxTagCount === 'responsive'
     const maxTagCountNumeric = typeof maxTagCount === 'number'
@@ -501,7 +505,12 @@ export default defineComponent({
               internalStopClickPropagation
               onClose={() => this.handleDeleteOption(option)}
             >
-              {{ default: () => option.label }}
+              {{
+                default: () =>
+                  renderLabel
+                    ? renderLabel(option, true)
+                    : render(option.label, option, true)
+              }}
             </NTag>
           )}
         </div>
@@ -641,7 +650,9 @@ export default defineComponent({
         : null
       const placeholder =
         !this.selected && !this.pattern && !this.isCompositing ? (
-          <div class={`${clsPrefix}-base-selection-placeholder`}>
+          <div
+            class={`${clsPrefix}-base-selection-placeholder ${clsPrefix}-base-render-dom`}
+          >
             {this.placeholder}
           </div>
         ) : null
@@ -713,11 +724,7 @@ export default defineComponent({
               ref="patternInputRef"
               class={`${clsPrefix}-base-selection-label__input`}
               value={
-                showPlaceholder
-                  ? ''
-                  : this.patternInputFocused && this.active
-                    ? this.pattern
-                    : String(this.label)
+                this.patternInputFocused && this.active ? this.pattern : ''
               }
               placeholder=""
               readonly={disabled}
@@ -730,8 +737,20 @@ export default defineComponent({
               onCompositionstart={this.handleCompositionStart}
               onCompositionend={this.handleCompositionEnd}
             />
+            {showPlaceholder ? null : this.patternInputFocused &&
+              this.active ? null : (
+              <div
+                class={`${clsPrefix}-base-selection-label__render-label ${clsPrefix}-base-render-dom`}
+              >
+                {renderLabel
+                  ? renderLabel(this.selectedOption as SelectBaseOption, true)
+                  : render(this.label, this.selectedOption, true)}
+              </div>
+              )}
             {showPlaceholder ? (
-              <div class={`${clsPrefix}-base-selection-placeholder`}>
+              <div
+                class={`${clsPrefix}-base-selection-placeholder ${clsPrefix}-base-render-dom`}
+              >
                 {this.filterablePlaceholder}
               </div>
             ) : null}
@@ -751,11 +770,13 @@ export default defineComponent({
                 title={getTitleAttribute(this.label)}
                 key="input"
               >
-                {this.label}
+                {renderLabel
+                  ? renderLabel(this.selectedOption as SelectBaseOption, true)
+                  : render(this.label, this.selectedOption, true)}
               </div>
             ) : (
               <div
-                class={`${clsPrefix}-base-selection-placeholder`}
+                class={`${clsPrefix}-base-selection-placeholder ${clsPrefix}-base-render-dom`}
                 key="placeholder"
               >
                 {this.placeholder}

src/_internal/selection/src/styles/index.cssr.ts

@@ -85,7 +85,7 @@ export default c([
         transition: color .3s var(--bezier);
       `)
     ]),
-    cB('base-selection-placeholder', `
+    cB('base-render-dom', `
       white-space: nowrap;
       overflow: hidden;
       height: var(--height);
@@ -98,6 +98,8 @@ export default c([
       left: 0;
       padding: var(--padding-single);
       transition: color .3s var(--bezier);
+    `),
+    cB('base-selection-placeholder', `
       color: var(--placeholder-color);
     `),
     cB('base-selection-tags', `
@@ -150,6 +152,9 @@ export default c([
         color: var(--text-color);
         transition: color .3s var(--bezier);
         caret-color: var(--caret-color);
+      `),
+      cE('render-label', `
+        color: var(--text-color);
       `)
     ]),
     cNotM('disabled', [

src/select/src/Select.tsx

@@ -690,6 +690,7 @@ export default defineComponent({
                       selectedOptions={this.selectedOptions}
                       multiple={this.multiple}
                       renderTag={this.renderTag}
+                      renderLabel={this.renderLabel}
                       filterable={this.filterable}
                       clearable={this.clearable}
                       disabled={this.disabled}