fix(Select): ensure keys props with content/children work correctly (#3829)

* fix(Select): ensure keys props with content/children work correctly * fix(Select): enhance rendering logic for custom keys * chore: centralize keys logic --------- Co-authored-by: wū yāng <uyarnchen@gmail.com>

Author: RylanBot

packages/components/select/base/Option.tsx

@@ -1,12 +1,13 @@
 import React, { useEffect, useMemo } from 'react';
 import classNames from 'classnames';
-import { isNumber, isString, get } from 'lodash-es';
+import { get, isNumber, isString } from 'lodash-es';
 
 import useConfig from '../../hooks/useConfig';
 import useDomRefCallback from '../../hooks/useDomRefCallback';
 import useRipple from '../../hooks/useRipple';
-import { StyledProps } from '../../common';
-import { SelectValue, TdOptionProps, TdSelectProps, SelectKeysType, SelectOption } from '../type';
+
+import type { StyledProps } from '../../common';
+import type { SelectKeysType, SelectOption, SelectValue, TdOptionProps, TdSelectProps } from '../type';
 
 /**
  * Option 组件属性
@@ -119,7 +120,8 @@ const Option: React.FC<SelectOptionProps> = (props) => {
  }
  };
 
- const renderItem = (children: React.ReactNode) => {
+ const renderItem = () => {
+ const displayContent = children || content || label;
  if (multiple) {
  return (
  <label
@@ -141,11 +143,11 @@ const Option: React.FC<SelectOptionProps> = (props) => {
  }}
  />
  <span className={classNames(`${classPrefix}-checkbox__input`)}></span>
- <span className={classNames(`${classPrefix}-checkbox__label`)}>{children || content || label}</span>
+ <span className={classNames(`${classPrefix}-checkbox__label`)}>{displayContent}</span>
  </label>
  );
  }
- return <span title={titleContent}>{children || content || label}</span>;
+ return <span title={titleContent}>{displayContent}</span>;
  };
 
  return (
@@ -161,7 +163,7 @@ const Option: React.FC<SelectOptionProps> = (props) => {
  ref={setRefCurrent}
  style={style}
  >
- {renderItem(children)}
+ {renderItem()}
  </li>
  );
 };

packages/components/select/base/PopupContent.tsx

@@ -1,20 +1,23 @@
-import React, { Children, isValidElement, cloneElement, useRef, CSSProperties, useMemo } from 'react';
+import React, { Children, cloneElement, isValidElement, useMemo, useRef } from 'react';
+
 import classNames from 'classnames';
 import { isEqual } from 'lodash-es';
+
+import useConfig from '../../hooks/useConfig';
 import { useLocaleReceiver } from '../../locale/LocalReceiver';
+import usePanelVirtualScroll from '../hooks/usePanelVirtualScroll';
 import { getSelectValueArr } from '../util/helper';
-import {
- TdSelectProps,
- SelectValue,
- TdOptionProps,
- SelectValueChangeTrigger,
+import Option, { type SelectOptionProps } from './Option';
+import OptionGroup from './OptionGroup';
+
+import type {
  SelectOption,
  SelectOptionGroup,
+ SelectValue,
+ SelectValueChangeTrigger,
+ TdOptionProps,
+ TdSelectProps,
 } from '../type';
-import useConfig from '../../hooks/useConfig';
-import usePanelVirtualScroll from '../hooks/usePanelVirtualScroll';
-import Option, { SelectOptionProps } from './Option';
-import OptionGroup from './OptionGroup';
 
 interface SelectPopupProps
  extends Pick<
@@ -171,7 +174,10 @@ const PopupContent = React.forwardRef<HTMLDivElement, SelectPopupProps>((props,
  );
  }
 
- const { value: optionValue, label, disabled, content, children, ...restData } = item as TdOptionProps;
+ const { value: optionValue, label, disabled, children, ...restData } = item as TdOptionProps;
+ // 当 keys 属性配置 content 作为 value 或 label 时，确保 restData 中也包含它, 不参与渲染计算
+ const { content } = item as TdOptionProps;
+ const shouldOmitContent = Object.values(keys || {}).includes('content');
  return (
  <Option
  key={index}
@@ -186,7 +192,6 @@ const PopupContent = React.forwardRef<HTMLDivElement, SelectPopupProps>((props,
  disabled={disabled}
  restData={restData}
  keys={keys}
- content={content}
  onCheckAllChange={onCheckAllChange}
  onRowMounted={handleRowMounted}
  {...(isVirtual
@@ -197,6 +202,7 @@ const PopupContent = React.forwardRef<HTMLDivElement, SelectPopupProps>((props,
  }
  : {})}
  {...restData}
+ content={shouldOmitContent ? null : content}
  >
  {children}
  </Option>
@@ -211,7 +217,7 @@ const PopupContent = React.forwardRef<HTMLDivElement, SelectPopupProps>((props,
  const isEmpty =
  (Array.isArray(childrenWithProps) && !childrenWithProps.length) || (propsOptions && propsOptions.length === 0);
 
- const renderPanel = (renderedOptions: SelectOption[], extraStyle?: CSSProperties) => (
+ const renderPanel = (renderedOptions: SelectOption[], extraStyle?: React.CSSProperties) => (
  <div
  ref={ref}
  className={classNames(`${classPrefix}-select__dropdown-inner`, {