feat(Select): support keyboard control

Author: uyarn

packages/components/select/base/PopupContent.tsx

@@ -57,7 +57,7 @@ interface SelectPopupProps
   children?: React.ReactNode;
   onCheckAllChange?: (checkAll: boolean, e: React.MouseEvent<HTMLLIElement>) => void;
   getPopupInstance?: () => HTMLDivElement;
-  hoverIndex: number;
+  hoverOption: TdOptionProps;
 }
 
 const PopupContent = React.forwardRef<HTMLDivElement, SelectPopupProps>((props, ref) => {
@@ -81,7 +81,7 @@ const PopupContent = React.forwardRef<HTMLDivElement, SelectPopupProps>((props,
     getPopupInstance,
     options: propsOptions,
     scroll: propsScroll,
-    hoverIndex,
+    hoverOption,
   } = props;
 
   // 国际化文本初始化
@@ -179,7 +179,8 @@ const PopupContent = React.forwardRef<HTMLDivElement, SelectPopupProps>((props,
             // 当 keys 属性配置 content 作为 value 或 label 时，确保 restData 中也包含它, 不参与渲染计算
             const { content } = item as TdOptionProps;
             const shouldOmitContent = Object.values(keys || {}).includes('content');
-            const isKeyboardHovered = hoverIndex === index;
+
+            const isKeyboardHovered = hoverOption?.value === optionValue;
             return (
               <Option
                 key={index}

packages/components/select/base/Select.tsx

@@ -110,21 +110,13 @@ const Select = forwardRefWithStatics(
     const [showPopup, setShowPopup] = useControlled(props, 'popupVisible', onPopupVisibleChange);
     const [inputValue, onInputChange] = useControlled(props, 'inputValue', props.onInputChange);
 
-    const { currentOptions, setCurrentOptions, tmpPropOptions, valueToOption, selectedOptions } = useOptions(
-      keys,
-      options,
-      children,
-      valueType,
-      value,
-      reserveKeyword,
-    );
+    const { currentOptions, setCurrentOptions, tmpPropOptions, valueToOption, selectedOptions, flattenedOptions } =
+      useOptions(keys, options, children, valueType, value, reserveKeyword);
 
     const onCheckAllChange = useCallback(
       (checkAll: boolean, e: React.MouseEvent<HTMLLIElement>) => {
         const isDisabledCheckAll = (opt: TdOptionProps) => opt.checkAll && opt.disabled;
-        if (!multiple || currentOptions.some((opt) => !isSelectOptionGroup(opt) && isDisabledCheckAll(opt))) {
-          return;
-        }
+        if (!multiple || currentOptions.some((opt) => !isSelectOptionGroup(opt) && isDisabledCheckAll(opt))) return;
 
         const { valueKey } = getKeyMapping(keys);
         const isObjectType = valueType === 'object';
@@ -189,8 +181,8 @@ const Select = forwardRefWithStatics(
       [currentOptions, keys, multiple, onChange, value, valueToOption, valueType],
     );
 
-    const { handleKeyDown, hoverIndex } = useKeyboardControl({
-      displayOptions: currentOptions as TdOptionProps[],
+    const { handleKeyDown, hoverOption, hoverIndex } = useKeyboardControl({
+      displayOptions: flattenedOptions as TdOptionProps[],
       max,
       multiple,
       setInnerPopupVisible: setShowPopup,
@@ -430,7 +422,7 @@ const Select = forwardRefWithStatics(
         onCheckAllChange,
         getPopupInstance,
         scroll,
-        hoverIndex,
+        hoverOption,
       };
       return <PopupContent {...popupContentProps}>{childrenWithProps}</PopupContent>;
     };

packages/components/select/hooks/useKeyboardControl.ts

@@ -16,6 +16,7 @@ export type useKeyboardControlType = {
   max: number;
   selectInputRef: any;
 };
+
 export default function useKeyboardControl({
   displayOptions,
   innerPopupVisible,
@@ -28,8 +29,8 @@ export default function useKeyboardControl({
   selectInputRef,
 }: useKeyboardControlType) {
   const [hoverIndex, changeHoverIndex] = useState(-1);
-  const filteredOptions = useState([]); // 处理普通场景选项过滤键盘选中的问题
-  const virtualFilteredOptions = useState([]); // 处理虚拟滚动下选项过滤通过键盘选择的问题
+  const [hoverOption, changeHoverOption] = useState<TdOptionProps>(undefined);
+
   const { classPrefix } = useConfig();
   // 全选判断
   const isCheckAll = useRef(false);
@@ -74,6 +75,8 @@ export default function useKeyboardControl({
           newIndex -= 1;
         }
         changeHoverIndex(newIndex);
+
+        changeHoverOption(displayOptions[newIndex]);
         handleKeyboardScroll(newIndex);
         break;
       case 'ArrowDown':
@@ -88,6 +91,8 @@ export default function useKeyboardControl({
           newIndex += 1;
         }
         changeHoverIndex(newIndex);
+        changeHoverOption(displayOptions[newIndex]);
+
         handleKeyboardScroll(newIndex);
         break;
       case 'Enter':
@@ -139,8 +144,7 @@ export default function useKeyboardControl({
 
   return {
     handleKeyDown,
+    hoverOption,
     hoverIndex,
-    filteredOptions,
-    virtualFilteredOptions,
   };
 }

packages/components/select/hooks/useOptions.ts

@@ -6,10 +6,25 @@ import { getKeyMapping, getValueToOption, type ValueToOption } from '../util/hel
 
 import type { SelectKeysType, SelectOption, SelectOptionGroup, SelectValue, TdOptionProps } from '../type';
 
+// 针对分组的相关判断和扁平处理
 export function isSelectOptionGroup(option: SelectOption): option is SelectOptionGroup {
   return !!option && 'group' in option && 'children' in option;
 }
 
+export const flattenOptions = (options: SelectOption[]) => {
+  const flattened = [];
+  options.forEach((option) => {
+    if (isSelectOptionGroup(option)) {
+      if (option.children) {
+        flattened.push(...option.children);
+      }
+    } else {
+      flattened.push(option);
+    }
+  });
+  return flattened;
+};
+
 type OptionValueType = SelectValue<SelectOption>;
 
 // 处理 options 的逻辑
@@ -23,6 +38,7 @@ function useOptions(
 ) {
   const [valueToOption, setValueToOption] = useState<ValueToOption>({});
   const [currentOptions, setCurrentOptions] = useState<SelectOption[]>([]);
+  const [flattenedOptions, setFlattenedOptions] = useState<SelectOption[]>([]);
   const [tmpPropOptions, setTmpPropOptions] = useState<SelectOption[]>([]);
   const [selectedOptions, setSelectedOptions] = useState<SelectOption[]>([]);
 
@@ -65,6 +81,7 @@ function useOptions(
     }
     setCurrentOptions(transformedOptions);
     setTmpPropOptions(transformedOptions);
+    setFlattenedOptions(flattenOptions(transformedOptions));
 
     setValueToOption(getValueToOption(children as ReactElement, options as TdOptionProps[], keys) || {});
     // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -115,6 +132,7 @@ function useOptions(
     setValueToOption,
     selectedOptions,
     setSelectedOptions,
+    flattenedOptions,
   };
 }
 

packages/components/tag-input/TagInput.tsx

@@ -123,12 +123,12 @@ const TagInput = forwardRef<InputRef, TagInputProps>((originalProps, ref) => {
 
   const onKeydown = (value: string, context: { e: React.KeyboardEvent<HTMLInputElement> }) => {
     onInputBackspaceKeyDown(value, context);
-    inputProps.onKeydown?.(value, context);
+    inputProps?.onKeydown?.(value, context);
   };
 
   const onKeyup = (value: string, context: { e: React.KeyboardEvent<HTMLInputElement> }) => {
     onInputBackspaceKeyUp(value);
-    inputProps.onKeyup?.(value, context);
+    inputProps?.onKeyup?.(value, context);
   };
 
   const suffixIconNode = showClearIcon ? (