fix: valueType='object'

Author: RylanBot

packages/components/select/base/PopupContent.tsx

@@ -6,7 +6,7 @@ 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 { getKeyMapping, getSelectValueArr } from '../util/helper';
 import Option, { type SelectOptionProps } from './Option';
 import OptionGroup from './OptionGroup';
 
@@ -83,12 +83,12 @@ const PopupContent = React.forwardRef<HTMLDivElement, SelectPopupProps>((props,
     scroll: propsScroll,
     hoverIndex,
   } = props;
+  const { classPrefix } = useConfig();
 
-  // 国际化文本初始化
   const [local, t] = useLocaleReceiver('select');
   const emptyText = t(local.empty);
-  const popupContentRef = useRef<HTMLDivElement>(null);
 
+  const popupContentRef = useRef<HTMLDivElement>(null);
   popupContentRef.current = getPopupInstance();
 
   const { visibleData, handleRowMounted, isVirtual, panelStyle, cursorStyle } = usePanelVirtualScroll({
@@ -98,6 +98,9 @@ const PopupContent = React.forwardRef<HTMLDivElement, SelectPopupProps>((props,
     size,
   });
 
+  const isObjectType = useMemo(() => valueType === 'object', [valueType]);
+  const { valueKey, labelKey } = useMemo(() => getKeyMapping(keys), [keys]);
+
   const optionsExcludedCheckAll = useMemo(() => {
     const uniqueOptions = {};
     propsOptions?.forEach((option: SelectOption) => {
@@ -114,36 +117,18 @@ const PopupContent = React.forwardRef<HTMLDivElement, SelectPopupProps>((props,
     return Object.values(uniqueOptions);
   }, [propsOptions]);
 
-  const { classPrefix } = useConfig();
-  if (!children && !propsOptions) {
-    return null;
-  }
-
   const onSelect: SelectOptionProps['onSelect'] = (selectedValue, { label, selected, event, restData }) => {
-    const isValObj = valueType === 'object';
-    let objVal = {};
-    if (isValObj) {
-      objVal = { ...restData };
-      if (!keys?.label) {
-        Object.assign(objVal, { label });
-      }
-      if (!keys?.value) {
-        Object.assign(objVal, { value: selectedValue });
-      }
-    }
-
-    if (!Object.keys(objVal).length) {
-      Object.assign(objVal, { [keys?.label || 'label']: label, [keys?.value || 'value']: selectedValue });
-    }
+    const objVal = {
+      ...(isObjectType ? { ...restData } : {}),
+      [labelKey]: label,
+      [valueKey]: selectedValue,
+    };
 
     if (multiple) {
-      // calc multiple select values
       const values = getSelectValueArr(value, selectedValue, selected, valueType, keys, objVal);
       onChange(values, { label, value: selectedValue, e: event, trigger: selected ? 'uncheck' : 'check' });
     } else {
-      // calc single select value
       const selectVal = valueType === 'object' ? objVal : selectedValue;
-
       if (!isEqual(value, selectVal)) {
         onChange(selectVal, { label, value: selectVal, e: event, trigger: 'check' });
       }
@@ -159,6 +144,9 @@ const PopupContent = React.forwardRef<HTMLDivElement, SelectPopupProps>((props,
     return child;
   });
 
+  const isEmpty =
+    (Array.isArray(childrenWithProps) && !childrenWithProps.length) || (propsOptions && propsOptions.length === 0);
+
   // 渲染 options
   const renderOptions = (options: SelectOption[], startIndex = 0) => {
     if (options) {
@@ -225,9 +213,6 @@ const PopupContent = React.forwardRef<HTMLDivElement, SelectPopupProps>((props,
     return <ul className={`${classPrefix}-select__list`}>{childrenWithProps}</ul>;
   };
 
-  const isEmpty =
-    (Array.isArray(childrenWithProps) && !childrenWithProps.length) || (propsOptions && propsOptions.length === 0);
-
   const renderPanel = (renderedOptions: SelectOption[], extraStyle?: React.CSSProperties) => (
     <div
       ref={ref}
@@ -245,6 +230,7 @@ const PopupContent = React.forwardRef<HTMLDivElement, SelectPopupProps>((props,
       {!loading && !isEmpty && renderOptions(renderedOptions)}
     </div>
   );
+
   if (isVirtual) {
     return (
       <>
@@ -258,6 +244,8 @@ const PopupContent = React.forwardRef<HTMLDivElement, SelectPopupProps>((props,
     );
   }
 
+  if (!children && !propsOptions) return null;
+
   return (
     <>
       {panelTopContent}

packages/components/select/base/Select.tsx

@@ -291,16 +291,17 @@ const Select = forwardRefWithStatics(
     };
 
     const { hoverIndex, handleKeyDown } = useKeyboardControl({
-      keys,
       displayOptions: flattenedOptions as TdOptionProps[],
+      keys,
+      innerPopupVisible,
       max,
       multiple,
+      selectInputRef,
+      value,
+      valueType,
       handlePopupVisibleChange,
-      innerPopupVisible,
       handleChange,
-      value,
       onCheckAllChange,
-      selectInputRef,
       toggleIsScrolling,
     });
 

packages/components/select/hooks/useKeyboardControl.ts

@@ -6,10 +6,11 @@ import { getKeyMapping, getSelectValueArr } from '../util/helper';
 import type { SelectOption, SelectValue, SelectValueChangeTrigger, TdOptionProps, TdSelectProps } from '../type';
 
 export type useKeyboardControlType = {
-  keys: TdSelectProps['keys'];
   max: number;
   multiple: boolean;
+  keys: TdSelectProps['keys'];
   value: SelectValue<SelectOption>;
+  valueType: TdSelectProps['valueType'];
   handleChange: (
     value: SelectValue,
     context: {
@@ -26,10 +27,11 @@ export type useKeyboardControlType = {
 };
 
 export default function useKeyboardControl({
-  keys,
   max,
   multiple,
+  keys,
   value,
+  valueType,
   handleChange,
   innerPopupVisible,
   handlePopupVisibleChange,
@@ -43,6 +45,7 @@ export default function useKeyboardControl({
   const isCheckAll = useRef(false);
   const [hoverIndex, changeHoverIndex] = useState(-1);
 
+  const isObjectType = useMemo(() => valueType === 'object', [valueType]);
   const { valueKey, disabledKey } = useMemo(() => getKeyMapping(keys), [keys]);
 
   useEffect(() => {
@@ -111,46 +114,39 @@ export default function useKeyboardControl({
         changeHoverIndex(newIndex);
         handleKeyboardScroll(newIndex);
         break;
-      case 'Enter':
-        if (!innerPopupVisible) {
-          handlePopupVisibleChange(true, { e });
-          break;
+      case 'Enter': {
+        if (hoverIndex === -1) return;
+
+        if (displayOptions[hoverIndex].checkAll) {
+          onCheckAllChange(!isCheckAll.current, e);
+          return;
         }
 
-        if (hoverIndex === -1) return;
+        const selectedOptions = displayOptions[hoverIndex];
+        const optionValue = isObjectType ? selectedOptions : selectedOptions[valueKey];
 
         if (!multiple) {
-          const selectedOptions = displayOptions[hoverIndex];
-
-          if (selectedOptions)
-            handleChange(selectedOptions[valueKey], {
-              trigger: 'check',
-              e,
-            });
+          handleChange(optionValue, {
+            trigger: 'check',
+            e,
+          });
           handlePopupVisibleChange(false, { e });
           changeHoverIndex(-1);
           handleKeyboardScroll(0);
         } else {
-          if (displayOptions[hoverIndex].checkAll) {
-            onCheckAllChange(!isCheckAll.current, e);
-            return;
-          }
-
-          const optionValue = displayOptions[hoverIndex]?.[valueKey];
-          if (!optionValue) return;
-
-          const newValue = value as Array<SelectValue>;
-          const valueIndex = newValue.indexOf(optionValue);
+          const valueIndex = (value as SelectValue[]).indexOf(optionValue);
           const isSelected = valueIndex > -1;
-          const values = getSelectValueArr(value, optionValue, isSelected);
+          const values = getSelectValueArr(value, optionValue, isSelected, valueType, keys, selectedOptions);
 
           if (max > 0 && values.length > max) return; // 如果已选达到最大值 则不处理
+
           handleChange(values, {
             trigger: !isSelected ? 'check' : 'uncheck',
             e,
           });
         }
         break;
+      }
       case 'Escape':
         handlePopupVisibleChange(false, { e });
         changeHoverIndex(-1);

packages/components/select/util/helper.ts

@@ -193,6 +193,9 @@ export const getMultipleTags = (values: SelectValue[], keys: SelectKeysType) =>
   return tags;
 };
 
+/**
+ * 计算多选时的 `value` 数组
+ */
 export const getSelectValueArr = (
   values: SelectValue | SelectValue[],
   activeValue: SelectValue,
@@ -207,10 +210,10 @@ export const getSelectValueArr = (
 
   if (Array.isArray(values)) {
     let currentValues = [...values];
-    const isValueObj = valueType === 'object';
+    const isObjectType = valueType === 'object';
     if (selected) {
       currentValues = currentValues.filter((item: SelectLabeledValue) => {
-        if (isValueObj) {
+        if (isObjectType) {
           if (isPlainObject(activeValue)) {
             return get(item, valueKey) !== get(activeValue, valueKey);
           }
@@ -219,7 +222,7 @@ export const getSelectValueArr = (
         return item !== activeValue;
       });
     } else {
-      const item = isValueObj ? objVal : activeValue;
+      const item = isObjectType ? objVal : activeValue;
 
       currentValues.push(item as SelectValue);
     }