关于react.js:antd的选择框如何增加tab选中

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;