antd的抉择框默认是不容许tab选中的，如果有这种需要，那么须要批改源码。
通过剖析，antd的抉择框应用的是rc-select，将node_modules里的rc-select/lib/OptionList.js和rc-select/es/OptionList.js里减少Tab即可。（留神：每次npm install，rc-select都会变动，须要从新笼罩，如果更新了antd版本，须要从新测试tab性能是否失常，防止因为其降级导致有效）
/lib/OptionList.js
"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");Object.defineProperty(exports, "__esModule", { value: true});exports.default = void 0;var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));var React = _interopRequireWildcard(require("react"));var _KeyCode = _interopRequireDefault(require("rc-util/lib/KeyCode"));var _omit = _interopRequireDefault(require("rc-util/lib/omit"));var _pickAttrs = _interopRequireDefault(require("rc-util/lib/pickAttrs"));var _useMemo = _interopRequireDefault(require("rc-util/lib/hooks/useMemo"));var _classnames = _interopRequireDefault(require("classnames"));var _rcVirtualList = _interopRequireDefault(require("rc-virtual-list"));var _TransBtn = _interopRequireDefault(require("./TransBtn"));var _platformUtil = require("./utils/platformUtil");var _useBaseProps2 = _interopRequireDefault(require("./hooks/useBaseProps"));var _SelectContext = _interopRequireDefault(require("./SelectContext"));var _excluded = ["disabled", "title", "children", "style", "className"];/** * Using virtual list of option display. * Will fallback to dom if use customize render. */var OptionList = function OptionList(_, ref) { var _useBaseProps = (0, _useBaseProps2.default)(), prefixCls = _useBaseProps.prefixCls, id = _useBaseProps.id, open = _useBaseProps.open, multiple = _useBaseProps.multiple, searchValue = _useBaseProps.searchValue, toggleOpen = _useBaseProps.toggleOpen, notFoundContent = _useBaseProps.notFoundContent, onPopupScroll = _useBaseProps.onPopupScroll; var _React$useContext = React.useContext(_SelectContext.default), flattenOptions = _React$useContext.flattenOptions, onActiveValue = _React$useContext.onActiveValue, defaultActiveFirstOption = _React$useContext.defaultActiveFirstOption, onSelect = _React$useContext.onSelect, menuItemSelectedIcon = _React$useContext.menuItemSelectedIcon, rawValues = _React$useContext.rawValues, fieldNames = _React$useContext.fieldNames, virtual = _React$useContext.virtual, listHeight = _React$useContext.listHeight, listItemHeight = _React$useContext.listItemHeight; var itemPrefixCls = "".concat(prefixCls, "-item"); var memoFlattenOptions = (0, _useMemo.default)(function () { return flattenOptions; }, [open, flattenOptions], function (prev, next) { return next[0] && prev[1] !== next[1]; }); // =========================== List =========================== var listRef = React.useRef(null); var onListMouseDown = function onListMouseDown(event) { event.preventDefault(); }; var scrollIntoView = function scrollIntoView(index) { if (listRef.current) { listRef.current.scrollTo({ index: index }); } }; // ========================== Active ========================== var getEnabledActiveIndex = function getEnabledActiveIndex(index) { var offset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1; var len = memoFlattenOptions.length; for (var i = 0; i < len; i += 1) { var current = (index + i * offset + len) % len; var _memoFlattenOptions$c = memoFlattenOptions[current], group = _memoFlattenOptions$c.group, data = _memoFlattenOptions$c.data; if (!group && !data.disabled) { return current; } } return -1; }; var _React$useState = React.useState(function () { return getEnabledActiveIndex(0); }), _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2), activeIndex = _React$useState2[0], setActiveIndex = _React$useState2[1]; var setActive = function setActive(index) { var fromKeyboard = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false; setActiveIndex(index); var info = { source: fromKeyboard ? 'keyboard' : 'mouse' }; // Trigger active event var flattenItem = memoFlattenOptions[index]; if (!flattenItem) { onActiveValue(null, -1, info); return; } onActiveValue(flattenItem.data.value, index, info); }; // Auto active first item when list length or searchValue changed (0, React.useEffect)(function () { setActive(defaultActiveFirstOption !== false ? getEnabledActiveIndex(0) : -1); }, [memoFlattenOptions.length, searchValue]); // Auto scroll to item position in single mode (0, React.useEffect)(function () { /** * React will skip `onChange` when component update. * `setActive` function will call root accessibility state update which makes re-render. * So we need to delay to let Input component trigger onChange first. */ var timeoutId = setTimeout(function () { if (!multiple && open && rawValues.size === 1) { var value = Array.from(rawValues)[0]; var index = memoFlattenOptions.findIndex(function (_ref) { var data = _ref.data; return data.value === value; }); if (index !== -1) { setActive(index); scrollIntoView(index); } } }); // Force trigger scrollbar visible when open if (open) { var _listRef$current; (_listRef$current = listRef.current) === null || _listRef$current === void 0 ? void 0 : _listRef$current.scrollTo(undefined); } return function () { return clearTimeout(timeoutId); }; }, [open, searchValue]); // ========================== Values ========================== var onSelectValue = function onSelectValue(value) { if (value !== undefined) { onSelect(value, { selected: !rawValues.has(value) }); } // Single mode should always close by select if (!multiple) { toggleOpen(false); } }; // ========================= Keyboard ========================= React.useImperativeHandle(ref, function () { return { onKeyDown: function onKeyDown(event) { var which = event.which, ctrlKey = event.ctrlKey; switch (which) { // >>> Arrow keys & ctrl + n/p on Mac case _KeyCode.default.N: case _KeyCode.default.P: case _KeyCode.default.UP: case _KeyCode.default.DOWN: { var offset = 0; if (which === _KeyCode.default.UP) { offset = -1; } else if (which === _KeyCode.default.DOWN) { offset = 1; } else if ((0, _platformUtil.isPlatformMac)() && ctrlKey) { if (which === _KeyCode.default.N) { offset = 1; } else if (which === _KeyCode.default.P) { offset = -1; } } if (offset !== 0) { var nextActiveIndex = getEnabledActiveIndex(activeIndex + offset, offset); scrollIntoView(nextActiveIndex); setActive(nextActiveIndex, true); } break; } // >>> Select case _KeyCode.default.TAB:增加tab键选中切换 { // value var item = memoFlattenOptions[activeIndex]; if (item && !item.data.disabled) { onSelectValue(item.data.value); } else { onSelectValue(undefined); } break; } case _KeyCode.default.ENTER: { // value var item = memoFlattenOptions[activeIndex]; if (item && !item.data.disabled) { onSelectValue(item.data.value); } else { onSelectValue(undefined); } if (open) { event.preventDefault(); } break; } // >>> Close case _KeyCode.default.ESC: { toggleOpen(false); if (open) { event.stopPropagation(); } } } }, onKeyUp: function onKeyUp() {}, scrollTo: function scrollTo(index) { scrollIntoView(index); } }; }); // ========================== Render ========================== if (memoFlattenOptions.length === 0) { return /*#__PURE__*/React.createElement("div", { role: "listbox", id: "".concat(id, "_list"), className: "".concat(itemPrefixCls, "-empty"), onMouseDown: onListMouseDown }, notFoundContent); } var omitFieldNameList = Object.keys(fieldNames).map(function (key) { return fieldNames[key]; }); var getLabel = function getLabel(item) { return item.label; }; var renderItem = function renderItem(index) { var item = memoFlattenOptions[index]; if (!item) return null; var itemData = item.data || {}; var value = itemData.value; var group = item.group; var attrs = (0, _pickAttrs.default)(itemData, true); var mergedLabel = getLabel(item); return item ? /*#__PURE__*/React.createElement("div", (0, _extends2.default)({ "aria-label": typeof mergedLabel === 'string' && !group ? mergedLabel : null }, attrs, { key: index, role: group ? 'presentation' : 'option', id: "".concat(id, "_list_").concat(index), "aria-selected": rawValues.has(value) }), value) : null; }; return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", { role: "listbox", id: "".concat(id, "_list"), style: { height: 0, width: 0, overflow: 'hidden' } }, renderItem(activeIndex - 1), renderItem(activeIndex), renderItem(activeIndex + 1)), /*#__PURE__*/React.createElement(_rcVirtualList.default, { itemKey: "key", ref: listRef, data: memoFlattenOptions, height: listHeight, itemHeight: listItemHeight, fullHeight: false, onMouseDown: onListMouseDown, onScroll: onPopupScroll, virtual: virtual }, function (item, itemIndex) { var _classNames; var group = item.group, groupOption = item.groupOption, data = item.data, label = item.label, value = item.value; var key = data.key; // Group if (group) { return /*#__PURE__*/React.createElement("div", { className: (0, _classnames.default)(itemPrefixCls, "".concat(itemPrefixCls, "-group")) }, label !== undefined ? label : key); } var disabled = data.disabled, title = data.title, children = data.children, style = data.style, className = data.className, otherProps = (0, _objectWithoutProperties2.default)(data, _excluded); var passedProps = (0, _omit.default)(otherProps, omitFieldNameList); // Option var selected = rawValues.has(value); var optionPrefixCls = "".concat(itemPrefixCls, "-option"); var optionClassName = (0, _classnames.default)(itemPrefixCls, optionPrefixCls, className, (_classNames = {}, (0, _defineProperty2.default)(_classNames, "".concat(optionPrefixCls, "-grouped"), groupOption), (0, _defineProperty2.default)(_classNames, "".concat(optionPrefixCls, "-active"), activeIndex === itemIndex && !disabled), (0, _defineProperty2.default)(_classNames, "".concat(optionPrefixCls, "-disabled"), disabled), (0, _defineProperty2.default)(_classNames, "".concat(optionPrefixCls, "-selected"), selected), _classNames)); var mergedLabel = getLabel(item); var iconVisible = !menuItemSelectedIcon || typeof menuItemSelectedIcon === 'function' || selected; var content = mergedLabel || value; // https://github.com/ant-design/ant-design/issues/26717 var optionTitle = typeof content === 'string' || typeof content === 'number' ? content.toString() : undefined; if (title !== undefined) { optionTitle = title; } return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({}, passedProps, { "aria-selected": selected, className: optionClassName, title: optionTitle, onMouseMove: function onMouseMove() { if (activeIndex === itemIndex || disabled) { return; } setActive(itemIndex); }, onClick: function onClick() { if (!disabled) { onSelectValue(value); } }, style: style }), /*#__PURE__*/React.createElement("div", { className: "".concat(optionPrefixCls, "-content") }, content), /*#__PURE__*/React.isValidElement(menuItemSelectedIcon) || selected, iconVisible && /*#__PURE__*/React.createElement(_TransBtn.default, { className: "".concat(itemPrefixCls, "-option-state"), customizeIcon: menuItemSelectedIcon, customizeIconProps: { isSelected: selected } }, selected ? '✓' : null)); }));};var RefOptionList = /*#__PURE__*/React.forwardRef(OptionList);RefOptionList.displayName = 'OptionList';var _default = RefOptionList;exports.default = _default;/es/OptionList.js
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";import _extends from "@babel/runtime/helpers/esm/extends";import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";var _excluded = ["disabled", "title", "children", "style", "className"];import * as React from 'react';import { useEffect } from 'react';import KeyCode from "rc-util/es/KeyCode";import omit from "rc-util/es/omit";import pickAttrs from "rc-util/es/pickAttrs";import useMemo from "rc-util/es/hooks/useMemo";import classNames from 'classnames';import List from 'rc-virtual-list';import TransBtn from './TransBtn';import { isPlatformMac } from './utils/platformUtil';import useBaseProps from './hooks/useBaseProps';import SelectContext from './SelectContext';/** * Using virtual list of option display. * Will fallback to dom if use customize render. */var OptionList = function OptionList(_, ref) { var _useBaseProps = useBaseProps(), prefixCls = _useBaseProps.prefixCls, id = _useBaseProps.id, open = _useBaseProps.open, multiple = _useBaseProps.multiple, searchValue = _useBaseProps.searchValue, toggleOpen = _useBaseProps.toggleOpen, notFoundContent = _useBaseProps.notFoundContent, onPopupScroll = _useBaseProps.onPopupScroll; var _React$useContext = React.useContext(SelectContext), flattenOptions = _React$useContext.flattenOptions, onActiveValue = _React$useContext.onActiveValue, defaultActiveFirstOption = _React$useContext.defaultActiveFirstOption, onSelect = _React$useContext.onSelect, menuItemSelectedIcon = _React$useContext.menuItemSelectedIcon, rawValues = _React$useContext.rawValues, fieldNames = _React$useContext.fieldNames, virtual = _React$useContext.virtual, listHeight = _React$useContext.listHeight, listItemHeight = _React$useContext.listItemHeight; var itemPrefixCls = "".concat(prefixCls, "-item"); var memoFlattenOptions = useMemo(function () { return flattenOptions; }, [open, flattenOptions], function (prev, next) { return next[0] && prev[1] !== next[1]; }); // =========================== List =========================== var listRef = React.useRef(null); var onListMouseDown = function onListMouseDown(event) { event.preventDefault(); }; var scrollIntoView = function scrollIntoView(index) { if (listRef.current) { listRef.current.scrollTo({ index: index }); } }; // ========================== Active ========================== var getEnabledActiveIndex = function getEnabledActiveIndex(index) { var offset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 1; var len = memoFlattenOptions.length; for (var i = 0; i < len; i += 1) { var current = (index + i * offset + len) % len; var _memoFlattenOptions$c = memoFlattenOptions[current], group = _memoFlattenOptions$c.group, data = _memoFlattenOptions$c.data; if (!group && !data.disabled) { return current; } } return -1; }; var _React$useState = React.useState(function () { return getEnabledActiveIndex(0); }), _React$useState2 = _slicedToArray(_React$useState, 2), activeIndex = _React$useState2[0], setActiveIndex = _React$useState2[1]; var setActive = function setActive(index) { var fromKeyboard = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false; setActiveIndex(index); var info = { source: fromKeyboard ? 'keyboard' : 'mouse' }; // Trigger active event var flattenItem = memoFlattenOptions[index]; if (!flattenItem) { onActiveValue(null, -1, info); return; } onActiveValue(flattenItem.data.value, index, info); }; // Auto active first item when list length or searchValue changed useEffect(function () { setActive(defaultActiveFirstOption !== false ? getEnabledActiveIndex(0) : -1); }, [memoFlattenOptions.length, searchValue]); // Auto scroll to item position in single mode useEffect(function () { /** * React will skip `onChange` when component update. * `setActive` function will call root accessibility state update which makes re-render. * So we need to delay to let Input component trigger onChange first. */ var timeoutId = setTimeout(function () { if (!multiple && open && rawValues.size === 1) { var value = Array.from(rawValues)[0]; var index = memoFlattenOptions.findIndex(function (_ref) { var data = _ref.data; return data.value === value; }); if (index !== -1) { setActive(index); scrollIntoView(index); } } }); // Force trigger scrollbar visible when open if (open) { var _listRef$current; (_listRef$current = listRef.current) === null || _listRef$current === void 0 ? void 0 : _listRef$current.scrollTo(undefined); } return function () { return clearTimeout(timeoutId); }; }, [open, searchValue]); // ========================== Values ========================== var onSelectValue = function onSelectValue(value) { if (value !== undefined) { onSelect(value, { selected: !rawValues.has(value) }); } // Single mode should always close by select if (!multiple) { toggleOpen(false); } }; // ========================= Keyboard ========================= React.useImperativeHandle(ref, function () { return { onKeyDown: function onKeyDown(event) { var which = event.which, ctrlKey = event.ctrlKey; switch (which) { // >>> Arrow keys & ctrl + n/p on Mac case KeyCode.N: case KeyCode.P: case KeyCode.UP: case KeyCode.DOWN: { var offset = 0; if (which === KeyCode.UP) { offset = -1; } else if (which === KeyCode.DOWN) { offset = 1; } else if (isPlatformMac() && ctrlKey) { if (which === KeyCode.N) { offset = 1; } else if (which === KeyCode.P) { offset = -1; } } if (offset !== 0) { var nextActiveIndex = getEnabledActiveIndex(activeIndex + offset, offset); scrollIntoView(nextActiveIndex); setActive(nextActiveIndex, true); } break; } // >>> Select case KeyCode.TAB://增加tab键选中切换 { // value var item = memoFlattenOptions[activeIndex]; if (item && !item.data.disabled) { onSelectValue(item.data.value); } else { onSelectValue(undefined); } break; } case KeyCode.ENTER: { // value var item = memoFlattenOptions[activeIndex]; if (item && !item.data.disabled) { onSelectValue(item.data.value); } else { onSelectValue(undefined); } if (open) { event.preventDefault(); } break; } // >>> Close case KeyCode.ESC: { toggleOpen(false); if (open) { event.stopPropagation(); } } } }, onKeyUp: function onKeyUp() {}, scrollTo: function scrollTo(index) { scrollIntoView(index); } }; }); // ========================== Render ========================== if (memoFlattenOptions.length === 0) { return /*#__PURE__*/React.createElement("div", { role: "listbox", id: "".concat(id, "_list"), className: "".concat(itemPrefixCls, "-empty"), onMouseDown: onListMouseDown }, notFoundContent); } var omitFieldNameList = Object.keys(fieldNames).map(function (key) { return fieldNames[key]; }); var getLabel = function getLabel(item) { return item.label; }; var renderItem = function renderItem(index) { var item = memoFlattenOptions[index]; if (!item) return null; var itemData = item.data || {}; var value = itemData.value; var group = item.group; var attrs = pickAttrs(itemData, true); var mergedLabel = getLabel(item); return item ? /*#__PURE__*/React.createElement("div", _extends({ "aria-label": typeof mergedLabel === 'string' && !group ? mergedLabel : null }, attrs, { key: index, role: group ? 'presentation' : 'option', id: "".concat(id, "_list_").concat(index), "aria-selected": rawValues.has(value) }), value) : null; }; return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", { role: "listbox", id: "".concat(id, "_list"), style: { height: 0, width: 0, overflow: 'hidden' } }, renderItem(activeIndex - 1), renderItem(activeIndex), renderItem(activeIndex + 1)), /*#__PURE__*/React.createElement(List, { itemKey: "key", ref: listRef, data: memoFlattenOptions, height: listHeight, itemHeight: listItemHeight, fullHeight: false, onMouseDown: onListMouseDown, onScroll: onPopupScroll, virtual: virtual }, function (item, itemIndex) { var _classNames; var group = item.group, groupOption = item.groupOption, data = item.data, label = item.label, value = item.value; var key = data.key; // Group if (group) { return /*#__PURE__*/React.createElement("div", { className: classNames(itemPrefixCls, "".concat(itemPrefixCls, "-group")) }, label !== undefined ? label : key); } var disabled = data.disabled, title = data.title, children = data.children, style = data.style, className = data.className, otherProps = _objectWithoutProperties(data, _excluded); var passedProps = omit(otherProps, omitFieldNameList); // Option var selected = rawValues.has(value); var optionPrefixCls = "".concat(itemPrefixCls, "-option"); var optionClassName = classNames(itemPrefixCls, optionPrefixCls, className, (_classNames = {}, _defineProperty(_classNames, "".concat(optionPrefixCls, "-grouped"), groupOption), _defineProperty(_classNames, "".concat(optionPrefixCls, "-active"), activeIndex === itemIndex && !disabled), _defineProperty(_classNames, "".concat(optionPrefixCls, "-disabled"), disabled), _defineProperty(_classNames, "".concat(optionPrefixCls, "-selected"), selected), _classNames)); var mergedLabel = getLabel(item); var iconVisible = !menuItemSelectedIcon || typeof menuItemSelectedIcon === 'function' || selected; var content = mergedLabel || value; // https://github.com/ant-design/ant-design/issues/26717 var optionTitle = typeof content === 'string' || typeof content === 'number' ? content.toString() : undefined; if (title !== undefined) { optionTitle = title; } return /*#__PURE__*/React.createElement("div", _extends({}, passedProps, { "aria-selected": selected, className: optionClassName, title: optionTitle, onMouseMove: function onMouseMove() { if (activeIndex === itemIndex || disabled) { return; } setActive(itemIndex); }, onClick: function onClick() { if (!disabled) { onSelectValue(value); } }, style: style }), /*#__PURE__*/React.createElement("div", { className: "".concat(optionPrefixCls, "-content") }, content), /*#__PURE__*/React.isValidElement(menuItemSelectedIcon) || selected, iconVisible && /*#__PURE__*/React.createElement(TransBtn, { className: "".concat(itemPrefixCls, "-option-state"), customizeIcon: menuItemSelectedIcon, customizeIconProps: { isSelected: selected } }, selected ? '✓' : null)); }));};var RefOptionList = /*#__PURE__*/React.forwardRef(OptionList);RefOptionList.displayName = 'OptionList';export default RefOptionList;