feat: [tabSelectsValue api]支持配置是否启用tab快捷键控制选中选项的逻辑

Author: astfn

README.md

@@ -113,6 +113,7 @@ export default () => (
 | onFocus | called when focus | function | - |
 | onPopupScroll | called when menu is scrolled | function | - |
 | onSelect | called when a option is selected. param is option's value and option instance | Function(value, option:Option) | - |
+| tabSelectsValue | whether to enable the hot key for tab selection | boolean | true |
 | onDeselect | called when a option is deselected. param is option's value. only called for multiple or tags | Function(value, option:Option) | - |
 | onInputKeyDown | called when key down on input | Function(event) | - |
 | defaultActiveFirstOption | whether active first option by default | boolean | true |

src/OptionList.tsx

@@ -52,6 +52,7 @@ const OptionList: React.ForwardRefRenderFunction<RefOptionListProps, {}> = (_, r
     onActiveValue,
     defaultActiveFirstOption,
     onSelect,
+    tabSelectsValue,
     menuItemSelectedIcon,
     rawValues,
     fieldNames,
@@ -185,6 +186,20 @@ const OptionList: React.ForwardRefRenderFunction<RefOptionListProps, {}> = (_, r
   };
 
   // ========================= Keyboard =========================
+  const selectOptionHotKeyLogic = (event) => {
+    // value
+    const item = memoFlattenOptions[activeIndex];
+    if (item && !item?.data?.disabled && !overMaxCount) {
+      onSelectValue(item.value);
+    } else {
+      onSelectValue(undefined);
+    }
+
+    if (open) {
+      event.preventDefault();
+    }
+  };
+
   React.useImperativeHandle(ref, () => ({
     onKeyDown: (event) => {
       const { which, ctrlKey } = event;
@@ -217,20 +232,12 @@ const OptionList: React.ForwardRefRenderFunction<RefOptionListProps, {}> = (_, r
         }
 
         // >>> Select (Tab / Enter)
-        case KeyCode.TAB:
+        case KeyCode.TAB: {
+          tabSelectsValue && selectOptionHotKeyLogic(event);
+          break;
+        }
         case KeyCode.ENTER: {
-          // value
-          const item = memoFlattenOptions[activeIndex];
-          if (item && !item?.data?.disabled && !overMaxCount) {
-            onSelectValue(item.value);
-          } else {
-            onSelectValue(undefined);
-          }
-
-          if (open) {
-            event.preventDefault();
-          }
-
+          selectOptionHotKeyLogic(event);
           break;
         }
 

src/Select.tsx

@@ -124,6 +124,7 @@ export interface SelectProps<ValueType = any, OptionType extends BaseOptionType
   // >>> Select
   onSelect?: SelectHandler<ArrayElementType<ValueType>, OptionType>;
   onDeselect?: SelectHandler<ArrayElementType<ValueType>, OptionType>;
+  tabSelectsValue?: boolean;
 
   // >>> Options
   /**
@@ -181,6 +182,7 @@ const Select = React.forwardRef<BaseSelectRef, SelectProps<any, DefaultOptionTyp
       onSelect,
       onDeselect,
       popupMatchSelectWidth = true,
+      tabSelectsValue = true,
 
       // Options
       filterOption,
@@ -616,6 +618,7 @@ const Select = React.forwardRef<BaseSelectRef, SelectProps<any, DefaultOptionTyp
         onActiveValue,
         defaultActiveFirstOption: mergedDefaultActiveFirstOption,
         onSelect: onInternalSelect,
+        tabSelectsValue,
         menuItemSelectedIcon,
         rawValues,
         fieldNames: mergedFieldNames,
@@ -634,6 +637,7 @@ const Select = React.forwardRef<BaseSelectRef, SelectProps<any, DefaultOptionTyp
       onActiveValue,
       mergedDefaultActiveFirstOption,
       onInternalSelect,
+      tabSelectsValue,
       menuItemSelectedIcon,
       rawValues,
       mergedFieldNames,

src/SelectContext.ts

@@ -17,6 +17,7 @@ export interface SelectContextProps {
   onActiveValue: OnActiveValue;
   defaultActiveFirstOption?: boolean;
   onSelect: OnInternalSelect;
+  tabSelectsValue: boolean;
   menuItemSelectedIcon?: RenderNode;
   rawValues: Set<RawValueType>;
   fieldNames?: FieldNames;