fix(Select): improved label handling

Author: RylanBot

packages/components/_util/parseTNode.ts

@@ -1,7 +1,7 @@
-import React, { ReactElement, ReactNode } from 'react';
+import React, { type ReactElement, type ReactNode } from 'react';
 import { isFunction } from 'lodash-es';
 import log from '@tdesign/common-js/log/index';
-import { TNode } from '../common';
+import type { TNode } from '../common';
 
 // 解析 TNode 数据结构
 export default function parseTNode(
@@ -37,3 +37,16 @@ export function parseContentTNode<T>(tnode: TNode<T>, props: T) {
     return null;
   }
 }
+
+export function extractTextFromTNode(node: TNode): string {
+  if (typeof node === 'string' || typeof node === 'number' || typeof node === 'boolean') return String(node);
+  if (React.isValidElement(node)) {
+    const { children } = node.props || {};
+    if (children) return extractTextFromTNode(children);
+  }
+  if (Array.isArray(node)) {
+    return node.map(extractTextFromTNode).join('');
+  }
+  // todo：兼容 ((props: T) => ReactNode) 函数类型
+  return '';
+} 

packages/components/select-input/useSingle.tsx

@@ -3,6 +3,7 @@ import React, { useRef } from 'react';
 import classNames from 'classnames';
 import { isObject, pick } from 'lodash-es';
 
+import { extractTextFromTNode } from '../_util/parseTNode';
 import useConfig from '../hooks/useConfig';
 import useControlled from '../hooks/useControlled';
 import Input, { type InputRef, type TdInputProps } from '../input';
@@ -39,8 +40,9 @@ const DEFAULT_KEYS: TdSelectInputProps['keys'] = {
 };
 
 function getInputValue(value: TdSelectInputProps['value'], keys: TdSelectInputProps['keys']) {
+  if (!value) return '';
   const iKeys = keys || DEFAULT_KEYS;
-  return isObject(value) ? value[iKeys.label] : value;
+  return isObject(value) ? extractTextFromTNode(value[iKeys.label]) : String(value);
 }
 
 export default function useSingle(props: TdSelectInputProps) {
@@ -75,7 +77,23 @@ export default function useSingle(props: TdSelectInputProps) {
   ) => {
     // 单选，值的呈现方式
     const singleValueDisplay: any = !props.multiple ? props.valueDisplay : null;
-    const displayedValue = popupVisible && props.allowInput ? inputValue : getInputValue(value, keys);
+
+    let displayedValue: string;
+    let displayPlaceholder: string;
+
+    if (popupVisible && props.allowInput) {
+      // 弹窗打开且允许输入时
+      displayedValue = inputValue;
+      displayPlaceholder = extractTextFromTNode(props.placeholder);
+    } else if (singleValueDisplay) {
+      // 有选中值时
+      displayedValue = extractTextFromTNode(singleValueDisplay);
+      displayPlaceholder = extractTextFromTNode(singleValueDisplay);
+    } else {
+      // 没有选中值时
+      displayedValue = getInputValue(value, keys);
+      displayPlaceholder = props.placeholder;
+    }
 
     const handleBlur = (value, ctx) => {
       if (blurTimeoutRef.current) {
@@ -110,16 +128,9 @@ export default function useSingle(props: TdSelectInputProps) {
         {...commonInputProps}
         autoWidth={props.autoWidth}
         allowInput={props.allowInput}
-        placeholder={singleValueDisplay ? '' : props.placeholder}
-        value={singleValueDisplay ? ' ' : displayedValue}
-        label={
-          (props.label || singleValueDisplay) && (
-            <>
-              {props.label}
-              {singleValueDisplay as React.ReactNode}
-            </>
-          )
-        }
+        placeholder={displayPlaceholder}
+        value={displayedValue}
+        label={props.label}
         onChange={onInnerInputChange}
         onClear={onInnerClear}
         // [Important Info]: SelectInput.blur is not equal to Input, example: click popup panel

packages/components/select/base/Select.tsx

@@ -16,7 +16,7 @@ import composeRefs from '../../_util/composeRefs';
 import forwardRefWithStatics from '../../_util/forwardRefWithStatics';
 import { getOffsetTopToContainer } from '../../_util/helper';
 import noop from '../../_util/noop';
-import { parseContentTNode } from '../../_util/parseTNode';
+import { extractTextFromTNode, parseContentTNode } from '../../_util/parseTNode';
 import FakeArrow from '../../common/FakeArrow';
 import useConfig from '../../hooks/useConfig';
 import useControlled from '../../hooks/useControlled';
@@ -287,23 +287,30 @@ const Select = forwardRefWithStatics(
           return filter(value, option);
         }
         const upperValue = value.toUpperCase();
-        return (option?.label || '').toUpperCase().includes(upperValue);
+        const searchableText = extractTextFromTNode(option.label);
+        return searchableText.toUpperCase().includes(upperValue);
       };
 
       tmpPropOptions?.forEach((option) => {
         if (isSelectOptionGroup(option)) {
-          filteredOptions.push({
-            ...option,
-            children: option.children?.filter((child) => {
-              if (filterMethods(child)) {
-                filterLabels.push(child.label);
-                return true;
-              }
-              return false;
-            }),
+          const filteredChildren = option.children?.filter((child) => {
+            if (filterMethods(child)) {
+              const searchableText = extractTextFromTNode(child?.label);
+              filterLabels.push(searchableText);
+              return true;
+            }
+            return false;
           });
+
+          if (filteredChildren && filteredChildren.length > 0) {
+            filteredOptions.push({
+              ...option,
+              children: filteredChildren,
+            });
+          }
         } else if (filterMethods(option)) {
-          filterLabels.push(option.label);
+          const searchableText = extractTextFromTNode(option?.label);
+          filterLabels.push(searchableText);
           filteredOptions.push(option);
         }
       });
@@ -367,6 +374,7 @@ const Select = forwardRefWithStatics(
       }
       return child;
     });
+
     // 渲染主体内容
     const renderContent = () => {
       const popupContentProps = {
@@ -404,6 +412,7 @@ const Select = forwardRefWithStatics(
         }
         return ({ value: val }) =>
           val.slice(0, minCollapsedNum ? minCollapsedNum : val.length).map((v: string, key: number) => {
+            const originalLabel = get(selectedOptions[key], keys?.label || 'label');
             const filterOption: SelectOption & { disabled?: boolean } = options?.find((option) => option.label === v);
             return (
               <Tag
@@ -438,7 +447,7 @@ const Select = forwardRefWithStatics(
                   });
                 }}
               >
-                {v}
+                {originalLabel}
               </Tag>
             );
           });