feat(Select): implement keyboard navigation for selection

packages/components/hooks/useKeyboard.ts

@@ -0,0 +1,106 @@
+import { useCallback, useEffect, useState } from 'react';
+
+interface OptionGroup<T> {
+  group?: string;
+  children?: T[];
+}
+
+interface KeyboardProps<T> {
+  options: (T | OptionGroup<T>)[];
+  initialIndex: number;
+  onSelect: (option: T, e: React.KeyboardEvent) => void;
+  showPopup?: boolean;
+}
+
+const isOptionGroup = <T>(option: T | OptionGroup<T>): option is OptionGroup<T> =>
+  option && typeof option === 'object' && 'group' in option && 'children' in option;
+
+const flattenOptions = <T>(options: (T | OptionGroup<T>)[]): T[] => {
+  const flattened: T[] = [];
+  options.forEach((option) => {
+    if (isOptionGroup(option)) {
+      if (option.children) {
+        flattened.push(...option.children);
+      }
+    } else {
+      flattened.push(option);
+    }
+  });
+  return flattened;
+};
+
+const useKeyboard = <T>({ options, initialIndex, onSelect, showPopup }: KeyboardProps<T>) => {
+  const [hoverIndex, setHoverIndex] = useState(initialIndex);
+
+  const flatOptions = flattenOptions(options);
+
+  useEffect(() => {
+    console.log('useKeyboard effect:', {
+      initialIndex,
+      showPopup,
+      optionsLength: flatOptions.length,
+    });
+    setHoverIndex(initialIndex);
+  }, [flatOptions.length, initialIndex, showPopup]);
+
+  const findNextEnabledIndex = useCallback(
+    (startIndex: number, direction: 1 | -1) => {
+      if (!flatOptions || flatOptions.length === 0) return -1;
+      const len = flatOptions.length;
+      let i = startIndex;
+      for (let step = 0; step < len; step += 1) {
+        i = direction === 1 ? (i + 1) % len : (i - 1 + len) % len;
+        const opt = flatOptions[i];
+        // @ts-ignore
+        if (!opt?.disabled) return i;
+      }
+      return startIndex;
+    },
+    [flatOptions],
+  );
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (flatOptions.length === 0) return;
+
+      switch (e.key) {
+        case 'ArrowDown':
+          e.preventDefault();
+          setHoverIndex((prev) => {
+            const start = prev < 0 ? -1 : prev;
+            const next = findNextEnabledIndex(start, 1);
+            return next === start ? prev : next;
+          });
+          break;
+
+        case 'ArrowUp':
+          e.preventDefault();
+          setHoverIndex((prev) => {
+            const start = prev < 0 ? 0 : prev;
+            const next = findNextEnabledIndex(start, -1);
+            return next === start ? prev : next;
+          });
+          break;
+
+        case 'Enter':
+          e.preventDefault();
+          if (hoverIndex >= 0 && hoverIndex < flatOptions.length) {
+            const current = flatOptions[hoverIndex];
+            onSelect(current, e);
+          }
+          break;
+
+        default:
+          break;
+      }
+    },
+    [flatOptions, hoverIndex, onSelect, findNextEnabledIndex],
+  );
+
+  return {
+    hoverIndex,
+    handleKeyDown,
+  };
+};
+
+export default useKeyboard;

packages/components/select/_example/group.tsx

@@ -49,7 +49,7 @@ const OptionGroupSelect = () => {
 
   return (
     <Space breakLine style={{ width: '800px' }}>
-      <Select value={value} onChange={onChange} style={{ width: '40%' }} options={groupOptions} filterable />
+      {/* <Select value={value} onChange={onChange} style={{ width: '40%' }} options={groupOptions} filterable /> */}
       <Select value={value2} onChange={onChange2} style={{ width: '40%' }} multiple filterable>
         <Option value="all" label="全选" checkAll></Option>
         <OptionGroup label="分组一" divider={true}>

packages/components/select/base/Option.tsx

@@ -1,10 +1,11 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo } from 'react';
 import classNames from 'classnames';
 import { get, isNumber, isString } from 'lodash-es';
 
 import useConfig from '../../hooks/useConfig';
 import useDomRefCallback from '../../hooks/useDomRefCallback';
 import useRipple from '../../hooks/useRipple';
+import { isAllSelected } from '../util/checkAll';
 import { getKeyMapping } from '../util/helper';
 
 import type { StyledProps } from '../../common';
@@ -34,6 +35,9 @@ export interface SelectOptionProps
   optionLength?: number;
   isVirtual?: boolean;
   onRowMounted?: (rowData: { ref: HTMLElement; data: SelectOption }) => void;
+  isHovered?: boolean;
+  currentOptions?: SelectOption[];
+  valueType?: TdSelectProps['valueType'];
 }
 
 const componentType = 'select';
@@ -57,29 +61,26 @@ const Option: React.FC<SelectOptionProps> = (props) => {
     style,
     className,
     isVirtual,
+    isHovered,
+    currentOptions,
+    valueType,
   } = props;
 
   const label = propLabel || value;
   const disabled = propDisabled || (multiple && Array.isArray(selectedValue) && max && selectedValue.length >= max);
-  const initCheckedStatus = !(Array.isArray(selectedValue) && selectedValue.length === props.optionLength);
 
   let selected: boolean;
   let indeterminate: boolean;
-  // 处理存在禁用项时，全选状态无法来回切换的问题
-  const [allSelectableChecked, setAllSelectableChecked] = useState(initCheckedStatus);
 
   const titleContent = useMemo(() => {
-    // 外部设置 props，说明希望受控
     const controlledTitle = Reflect.has(props, 'title');
     if (controlledTitle) return propTitle;
     if (typeof label === 'string') return label;
     return null;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [propTitle, label]);
+  }, [propTitle, label, props]);
 
   const { classPrefix } = useConfig();
 
-  // 使用斜八角动画
   const [optionRef, setRefCurrent] = useDomRefCallback();
   useRipple(optionRef);
 
@@ -106,7 +107,6 @@ const Option: React.FC<SelectOptionProps> = (props) => {
   if (multiple && Array.isArray(selectedValue)) {
     selected = selectedValue.some((item) => {
       if (isNumber(item) || isString(item)) {
-        // 如果非 object 类型
         return item === value;
       }
       return get(item, valueKey) === value;
@@ -121,9 +121,10 @@ const Option: React.FC<SelectOptionProps> = (props) => {
     if (!disabled && !checkAll) {
       onSelect(value, { label: String(label), selected, event, restData });
     }
-    if (checkAll) {
-      props.onCheckAllChange?.(allSelectableChecked, event);
-      setAllSelectableChecked(!allSelectableChecked);
+    if (checkAll && currentOptions) {
+      // 使用工具函数计算当前是否全选
+      const allSelected = isAllSelected(currentOptions, selectedValue, keys, valueType);
+      props.onCheckAllChange?.(!allSelected, event);
     }
   };
 
@@ -161,7 +162,7 @@ const Option: React.FC<SelectOptionProps> = (props) => {
     <li
       className={classNames(className, `${classPrefix}-${componentType}-option`, {
         [`${classPrefix}-is-disabled`]: disabled,
-        [`${classPrefix}-is-selected`]: selected,
+        [`${classPrefix}-is-selected`]: selected && !isHovered,
         [`${classPrefix}-size-s`]: size === 'small',
         [`${classPrefix}-size-l`]: size === 'large',
       })}