@kdcloudjs/kdesign 1.6.5 → 1.6.7

package/lib/select/select.js

@@ -35,6 +35,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _hooks = require("../_utils/hooks");
 
+var _isBoolean = _interopRequireDefault(require("lodash/isBoolean"));
+
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _ConfigContext = _interopRequireDefault(require("../config-provider/ConfigContext"));
@@ -53,10 +55,10 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "functi
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-var InternalSelect = function InternalSelect(props, ref) {
-  var _context, _classNames7, _classNames13, _classNames14;
+var INPUT_MIN_WIDTH = 4; // 输入框最小宽度
 
-  var _a;
+var InternalSelect = function InternalSelect(props, ref) {
+  var _context, _classNames6, _classNames12;
 
   var _useContext = (0, _react.useContext)(_ConfigContext.default),
       getPrefixCls = _useContext.getPrefixCls,
@@ -92,6 +94,9 @@ var InternalSelect = function InternalSelect(props, ref) {
       dropdownStyle = selectProps.dropdownStyle,
       style = selectProps.style,
       clearIcon = selectProps.clearIcon,
+      filterOption = selectProps.filterOption,
+      optionFilterProp = selectProps.optionFilterProp,
+      optionLabelProp = selectProps.optionLabelProp,
       _selectProps$popperSt = selectProps.popperStyle,
       popperStyle = _selectProps$popperSt === void 0 ? {} : _selectProps$popperSt;
   var isMultiple = mode === 'multiple'; // 是否多选
@@ -118,6 +123,8 @@ var InternalSelect = function InternalSelect(props, ref) {
     selectMulOpts: []
   }); // 多选ref已选中项
 
+  var measureRef = _react.default.useRef(null);
+
   var _useState = (0, _react.useState)([]),
       _useState2 = (0, _slicedToArray2.default)(_useState, 2),
       mulOptions = _useState2[0],
@@ -132,18 +139,19 @@ var InternalSelect = function InternalSelect(props, ref) {
       _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
       optionShow = _useState6[0],
       setOptionShow = _useState6[1]; // 下拉列表是否展示
+  // const [searchInput, setSearchInput] = useState<string>('') // 搜索框值
 
 
   var _useState7 = (0, _react.useState)(''),
       _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
-      searchInput = _useState8[0],
-      setSearchInput = _useState8[1]; // 搜索框值
+      searchValue = _useState8[0],
+      setSearchValue = _useState8[1]; // 搜索框定时器
 
 
-  var _useState9 = (0, _react.useState)(null),
+  var _useState9 = (0, _react.useState)(INPUT_MIN_WIDTH),
       _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
-      timer = _useState10[0],
-      setTimer = _useState10[1]; // 搜索框定时器
+      inputWidth = _useState10[0],
+      setInputWidth = _useState10[1]; // 输入框宽度
 
 
   var selectPrefixCls = getPrefixCls(prefixCls, 'select', customPrefixcls); // 选择器样式
@@ -151,15 +159,13 @@ var InternalSelect = function InternalSelect(props, ref) {
   var selectCls = (0, _classnames.default)(selectPrefixCls, className, (0, _defineProperty2.default)({}, "".concat(selectPrefixCls, "-visible"), optionShow));
   var selectionCls = (0, _classnames.default)((0, _defineProperty2.default)({}, "".concat(selectPrefixCls, "-selector"), true)); // 下拉列表框样式
 
-  var dropDownCls = (0, _classnames.default)(dropdownClassName, (0, _defineProperty2.default)({}, "".concat(selectPrefixCls, "-dropdown"), true)); // 下拉搜索框样式
-
-  var searchCls = (0, _classnames.default)((0, _defineProperty2.default)({}, "".concat(selectPrefixCls, "-dropdown-search"), true)); // 下拉子项列表样式
+  var dropDownCls = (0, _classnames.default)(dropdownClassName, (0, _defineProperty2.default)({}, "".concat(selectPrefixCls, "-dropdown"), true)); // 下拉子项列表样式
 
   var dropContentCls = (0, _classnames.default)((0, _defineProperty2.default)({}, "".concat(selectPrefixCls, "-dropdown-scroll"), (isMultiple ? (realChildren === null || realChildren === void 0 ? void 0 : realChildren.length) > 8 : (realChildren === null || realChildren === void 0 ? void 0 : realChildren.length) > 10) || selectProps.dropdownRender)); // 多选底部样式
 
   var multipleFooterCls = (0, _classnames.default)((0, _defineProperty2.default)({}, "".concat(selectPrefixCls, "-multiple-footer"), true)); // 多选，单选公共样式
 
-  var commCls = (0, _classnames.default)((_classNames7 = {}, (0, _defineProperty2.default)(_classNames7, "".concat(selectPrefixCls, "-bordered"), borderType === 'bordered'), (0, _defineProperty2.default)(_classNames7, "".concat(selectPrefixCls, "-underline"), borderType === 'underline'), (0, _defineProperty2.default)(_classNames7, "".concat(selectPrefixCls, "-borderless"), borderType === 'none'), (0, _defineProperty2.default)(_classNames7, (0, _concat.default)(_context = "".concat(selectPrefixCls, "-size-")).call(_context, size), size), (0, _defineProperty2.default)(_classNames7, "".concat(selectPrefixCls, "-wrapper"), true), _classNames7));
+  var commCls = (0, _classnames.default)((_classNames6 = {}, (0, _defineProperty2.default)(_classNames6, "".concat(selectPrefixCls, "-bordered"), borderType === 'bordered'), (0, _defineProperty2.default)(_classNames6, "".concat(selectPrefixCls, "-underline"), borderType === 'underline'), (0, _defineProperty2.default)(_classNames6, "".concat(selectPrefixCls, "-borderless"), borderType === 'none'), (0, _defineProperty2.default)(_classNames6, (0, _concat.default)(_context = "".concat(selectPrefixCls, "-size-")).call(_context, size), size), (0, _defineProperty2.default)(_classNames6, "".concat(selectPrefixCls, "-wrapper"), true), _classNames6));
 
   _react.default.useEffect(function () {
     setOptionShow(!!props.visible);
@@ -209,8 +215,6 @@ var InternalSelect = function InternalSelect(props, ref) {
     }
   }, [isMultiple, initValue, children, options]);
   (0, _react.useEffect)(function () {
-    var _a;
-
     if (!isMultiple) {
       multipleRef.current.selectedVal = initValue; // 默认选中值
 
@@ -226,28 +230,27 @@ var InternalSelect = function InternalSelect(props, ref) {
         })) || {};
 
         if (options && options.length) {
-          setSingleVal((obj === null || obj === void 0 ? void 0 : obj.label) || (obj === null || obj === void 0 ? void 0 : obj.value));
+          setSingleVal(getOptionLabel(obj) || (obj === null || obj === void 0 ? void 0 : obj.value));
         } else {
-          setSingleVal((_a = obj.props) === null || _a === void 0 ? void 0 : _a.children);
+          // setSingleVal(obj.props?.children)
+          setSingleVal(getOptionLabel(obj));
         }
       } else {
         setSingleVal(undefined);
       }
     }
-  }, [initValue, realChildren]); // 更新搜索框的值，判断清除按钮显隐
-
+  }, [initValue, realChildren]);
   (0, _react.useEffect)(function () {
-    var _a;
-
-    setSearchInput((_a = searchRef.current) === null || _a === void 0 ? void 0 : _a.value);
-  }, [(_a = searchRef.current) === null || _a === void 0 ? void 0 : _a.value]);
-  (0, _react.useEffect)(function () {
-    handleClear();
-  }, [optionShow === false]);
+    if (optionShow === false) {
+      handleClear();
+    }
+  }, [optionShow]);
   var handleFocus = (0, _react.useCallback)(function (e) {
+    e.stopPropagation();
     onFocus && onFocus(e);
   }, [onFocus]);
   var handleBlur = (0, _react.useCallback)(function (e) {
+    e.stopPropagation();
     onBlur && onBlur(e);
   }, [onBlur]); // 点击组件
 
@@ -257,8 +260,7 @@ var InternalSelect = function InternalSelect(props, ref) {
     if (!optionShow) {
       var onDropdownVisibleChange = selectProps.onDropdownVisibleChange;
       onDropdownVisibleChange && onDropdownVisibleChange(!optionShow);
-    } // handleClear()
-
+    }
   };
 
   (0, _react.useEffect)(function () {
@@ -271,11 +273,62 @@ var InternalSelect = function InternalSelect(props, ref) {
         e.stopPropagation();
       }
     });
-  }, []); // 点击下拉列表中某项回调
+  }, []);
+  (0, _react.useLayoutEffect)(function () {
+    measureRef.current && setInputWidth(measureRef.current.scrollWidth);
+  }, [searchValue]);
+  var filledOptions = (0, _react.useMemo)(function () {
+    if (filterOption === false || !searchValue) {
+      return realChildren;
+    }
 
-  var handleOption = function handleOption(key, label, isSelected) {
-    var _a, _b, _c;
+    var childrenList = [];
+
+    var handleFilledOption = function handleFilledOption(option) {
+      if (filterOption === true) {
+        return String(option[optionFilterProp]).toLowerCase().indexOf(searchValue.toLowerCase()) !== -1;
+      } else if (typeof filterOption === 'function') {
+        return filterOption(searchValue, option);
+      }
+
+      return true;
+    };
+
+    (0, _map.default)(realChildren).call(realChildren, function (item) {
+      if (item === null || item === undefined) return;
+      var isValidOption = true;
+
+      if ((item === null || item === void 0 ? void 0 : item.props) && (item.type.displayName === 'Option' || item.type.name === 'Option')) {
+        isValidOption = handleFilledOption(item.props);
+      } else {
+        isValidOption = handleFilledOption(item);
+      }
 
+      if (isValidOption) {
+        childrenList.push(item);
+      }
+    });
+    return childrenList;
+  }, [searchValue, realChildren, filterOption, optionFilterProp]);
+  var getOptionLabel = (0, _react.useCallback)(function (obj) {
+    var _a;
+
+    if (obj.props) {
+      if (optionLabelProp) {
+        return obj === null || obj === void 0 ? void 0 : obj.props[optionLabelProp];
+      }
+
+      return (_a = obj.props) === null || _a === void 0 ? void 0 : _a.children;
+    } else {
+      if (optionLabelProp) {
+        return obj[optionLabelProp];
+      }
+    }
+
+    return obj === null || obj === void 0 ? void 0 : obj.label;
+  }, [optionLabelProp]); // 点击下拉列表中某项回调
+
+  var handleOption = function handleOption(key, label, isSelected) {
     var onSelect = selectProps.onSelect,
         onDeselect = selectProps.onDeselect,
         labelInValue = selectProps.labelInValue,
@@ -292,7 +345,6 @@ var InternalSelect = function InternalSelect(props, ref) {
     var optionsObj = obj.props ? obj.props : obj || {};
 
     if (value !== undefined) {
-      // onChange && onChange(labelInValue ? { value: key, label } : key)
       if (isMultiple) {
         var _multipleRef$current = multipleRef.current,
             selectedVal = _multipleRef$current.selectedVal,
@@ -308,7 +360,8 @@ var InternalSelect = function InternalSelect(props, ref) {
           valArr.push(key);
           optsArr.push((0, _extends2.default)((0, _extends2.default)({}, optionsObj), {
             value: key,
-            label: obj.props ? (_a = obj.props) === null || _a === void 0 ? void 0 : _a.children : obj.label || key
+            // label: obj.props ? obj.props?.children : obj.label || key,
+            label: getOptionLabel(obj) || key
           }));
         }
 
@@ -333,11 +386,10 @@ var InternalSelect = function InternalSelect(props, ref) {
     }
 
     if (!isMultiple) {
-      setSingleVal(obj.props ? (_b = obj.props) === null || _b === void 0 ? void 0 : _b.children : obj.label || key);
+      setSingleVal(getOptionLabel(obj) || key);
       multipleRef.current.selectedVal = key;
       setInitValue(key);
-      props.visible === undefined && setOptionShow(false); // handleClear()
-
+      props.visible === undefined && setOptionShow(false);
       onChange && onChange(labelInValue ? {
         value: key,
         label: label
@@ -360,10 +412,9 @@ var InternalSelect = function InternalSelect(props, ref) {
 
         _selectMulOpts.push((0, _extends2.default)((0, _extends2.default)({}, optionsObj), {
           value: key,
-          label: obj.props ? (_c = obj.props) === null || _c === void 0 ? void 0 : _c.children : obj.label || key
+          label: getOptionLabel(obj) || key
         }));
-      } // setInitValue([...selectedVal])
-
+      }
 
       setMulOptions((0, _toConsumableArray2.default)(_selectMulOpts));
       onChange && onChange(labelInValue ? _selectMulOpts : _selectedVal, _selectMulOpts);
@@ -371,11 +422,9 @@ var InternalSelect = function InternalSelect(props, ref) {
       if (!isSelected) {
         onDeselect && onDeselect(key); // 下拉项取消选中时调用，参数为选中项的value,多选模式下生效
       }
-    } // if (isSelected) {
-    //   onSelect && onSelect(key) // 下拉项被选中时调用，参数为选中项value或key
-    // }
-
+    }
 
+    setSearchValue('');
     onSelect && onSelect(key); // 下拉项被选中时调用，参数为选中项value或key
   }; // 多选模式下选中所有 与清除所有 (可以优化)
 
@@ -388,14 +437,13 @@ var InternalSelect = function InternalSelect(props, ref) {
     if ((realChildren === null || realChildren === void 0 ? void 0 : realChildren.length) !== selectedVal.length) {
       (0, _map.default)(realChildren).call(realChildren, function (child) {
         var _ref = child.props || child,
-            value = _ref.value,
-            children = _ref.children;
+            value = _ref.value;
 
         if (!(0, _includes.default)(selectedVal).call(selectedVal, value)) {
           selectedVal.push(value);
           selectMulOpts.push({
             value: value,
-            label: children
+            label: getOptionLabel(child)
           });
         }
       });
@@ -407,45 +455,31 @@ var InternalSelect = function InternalSelect(props, ref) {
     }
 
     onChange && onChange(labelInValue ? selectMulOpts : selectedVal, selectMulOpts);
-  }; // 筛选内容 ---可以优化，抽成hook
+  }; // 输入框变化搜索内容
 
 
-  var handleSearch = (0, _react.useCallback)(function (event) {
-    var _a;
-
-    if (event.currentTarget.matches('i')) {
-      onSearch && onSearch((_a = searchRef.current) === null || _a === void 0 ? void 0 : _a.value);
-    }
-  }, [onSearch]); // 输入框变化搜索内容
-
   var handleSearchChange = (0, _react.useCallback)(function (event) {
     var val = event.currentTarget.value;
-    clearTimeout(timer);
-    setTimer(setTimeout(function () {
-      onSearch && onSearch(val);
-    }, 500));
-  }, [onSearch, timer]); // 清除搜索内容
+    setSearchValue(val);
+    onSearch === null || onSearch === void 0 ? void 0 : onSearch(val);
+  }, [onSearch]); // 清除搜索内容
 
   var handleClear = (0, _react.useCallback)(function () {
     if (searchRef.current) {
       searchRef.current.value = '';
-      onSearch && onSearch('');
-      setSearchInput('');
+      setSearchValue('');
     }
-  }, [onSearch, searchRef]); // 清空选择器内容
+  }, [searchRef]); // 清空选择器内容
 
   var handleReset = function handleReset(e) {
-    e.stopPropagation(); // setOptionShow(false)
-    // e.nativeEvent.stopImmediatePropagation()
+    e.stopPropagation();
 
     if (isMultiple) {
       multipleRef.current.selectedVal = [];
       multipleRef.current.selectMulOpts = [];
       setMulOptions([]);
     } else {
-      // setSingleVal('')
-      setInitValue(''); // selectionRef.current.value = ''
-      // multipleRef.current.selectedVal = ''
+      setInitValue('');
     }
 
     onClear && onClear('');
@@ -455,8 +489,7 @@ var InternalSelect = function InternalSelect(props, ref) {
 
   var handleRemove = function handleRemove(e) {
     if (disabled) return;
-    var tag = e.currentTarget.parentNode.getAttribute('data-tag'); // const { tag } = e.currentTarget.dataset
-
+    var tag = e.currentTarget.parentNode.getAttribute('data-tag');
     var _multipleRef$current4 = multipleRef.current,
         selectedVal = _multipleRef$current4.selectedVal,
         selectMulOpts = _multipleRef$current4.selectMulOpts;
@@ -470,19 +503,19 @@ var InternalSelect = function InternalSelect(props, ref) {
 
 
   var renderSuffix = function renderSuffix() {
-    var _classNames8;
+    var _classNames7;
 
     var suffixIcon = selectProps.suffixIcon;
     var selectedVal = multipleRef.current.selectedVal; // 选择器下拉icon样式
 
-    var arrowIconCls = (0, _classnames.default)((_classNames8 = {}, (0, _defineProperty2.default)(_classNames8, "".concat(selectPrefixCls, "-icon-arrow"), true), (0, _defineProperty2.default)(_classNames8, "".concat(selectPrefixCls, "-icon-arrow-up"), optionShow), (0, _defineProperty2.default)(_classNames8, "".concat(selectPrefixCls, "-icon-arrow-down"), !optionShow), (0, _defineProperty2.default)(_classNames8, "".concat(selectPrefixCls, "-icon-arrow-focus"), optionShow), _classNames8));
+    var arrowIconCls = (0, _classnames.default)((_classNames7 = {}, (0, _defineProperty2.default)(_classNames7, "".concat(selectPrefixCls, "-icon-arrow"), true), (0, _defineProperty2.default)(_classNames7, "".concat(selectPrefixCls, "-icon-arrow-up"), optionShow), (0, _defineProperty2.default)(_classNames7, "".concat(selectPrefixCls, "-icon-arrow-down"), !optionShow), (0, _defineProperty2.default)(_classNames7, "".concat(selectPrefixCls, "-icon-arrow-focus"), optionShow), _classNames7));
     var iconShow = allowClear && !disabled && (isMultiple ? mulOptions.length > 0 : (selectedVal !== null && selectedVal !== void 0 ? selectedVal : '') !== '');
     var clearIconCls = (0, _classnames.default)((0, _defineProperty2.default)({}, "".concat(selectPrefixCls, "-icon-clear"), true));
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, iconShow && /*#__PURE__*/_react.default.createElement("span", {
       onClick: handleReset,
       className: clearIconCls
     }, /*#__PURE__*/_react.default.createElement(_index.Icon, {
-      type: "close"
+      type: "close-solid"
     }) || clearIcon), showArrow && /*#__PURE__*/_react.default.createElement("span", {
       className: arrowIconCls
     }, suffixIcon || /*#__PURE__*/_react.default.createElement(_index.Icon, {
@@ -525,30 +558,26 @@ var InternalSelect = function InternalSelect(props, ref) {
     var emptyListCls = (0, _classnames.default)((0, _defineProperty2.default)({}, "".concat(selectPrefixCls, "-dropdown-empty"), true));
     var notFoundContent = selectProps.notFoundContent;
     var emptyContent = notFoundContent || '暂无数据';
-    return (realChildren === null || realChildren === void 0 ? void 0 : realChildren.length) === 0 && /*#__PURE__*/_react.default.createElement("div", {
+    return (filledOptions === null || filledOptions === void 0 ? void 0 : filledOptions.length) === 0 && /*#__PURE__*/_react.default.createElement("div", {
       className: emptyListCls
     }, emptyContent);
-  };
+  }; // const isShowSearch = useCallback(() => {
+  //   return !showSearch ? false : !!searchValue
+  // }, [showSearch, searchValue])
 
-  var isShowSearch = (0, _react.useCallback)(function () {
-    if (isMultiple) {
-      return showSearch !== null && showSearch !== void 0 ? showSearch : true;
-    }
 
-    return showSearch !== null && showSearch !== void 0 ? showSearch : false;
-  }, [showSearch, isMultiple]); // 渲染下拉列表框
+  var isShowSearch = (0, _react.useMemo)(function () {
+    return (0, _isBoolean.default)(showSearch) ? showSearch : isMultiple;
+  }, [isMultiple, showSearch]); // 渲染下拉列表框
 
   var renderContent = function renderContent() {
-    var _a;
-
-    var searchIcon = selectProps.searchIcon,
-        dropdownRender = selectProps.dropdownRender,
+    var dropdownRender = selectProps.dropdownRender,
         listHeight = selectProps.listHeight;
     var selectedVal = multipleRef.current.selectedVal;
-    var childrenToRender = realChildren;
+    var childrenToRender = filledOptions;
 
-    if (Array.isArray(realChildren) && realChildren.length > 0) {
-      childrenToRender = (0, _map.default)(realChildren).call(realChildren, function (item, index) {
+    if (Array.isArray(childrenToRender) && childrenToRender.length > 0) {
+      childrenToRender = (0, _map.default)(childrenToRender).call(childrenToRender, function (item, index) {
         if (item === null || item === undefined) return;
         var temp = renderOption(item, index);
         return temp;
@@ -572,26 +601,7 @@ var InternalSelect = function InternalSelect(props, ref) {
       className: dropDownCls,
       style: dropDownStyle,
       ref: dropDownRef
-    }, isShowSearch() && /*#__PURE__*/_react.default.createElement("div", {
-      className: searchCls
-    }, /*#__PURE__*/_react.default.createElement(_index.Input, {
-      ref: searchRef,
-      value: ((_a = searchRef.current) === null || _a === void 0 ? void 0 : _a.value) || '',
-      borderType: "bordered",
-      placeholder: "\u8BF7\u8F93\u5165\u9700\u8981\u641C\u7D22\u7684\u5185\u5BB9",
-      // 搜索图标
-      prefix: /*#__PURE__*/_react.default.createElement("span", {
-        onClick: handleSearch
-      }, /*#__PURE__*/_react.default.createElement(_index.Icon, {
-        type: "search"
-      }) || searchIcon),
-      suffix: searchInput && /*#__PURE__*/_react.default.createElement("span", {
-        onClick: handleClear
-      }, /*#__PURE__*/_react.default.createElement(_index.Icon, {
-        type: "close"
-      })),
-      onChange: handleSearchChange
-    })), !dropdownRender && realChildren.length > 0 && dropRender(childrenToRender, heightStyle), renderNotContent(), /*#__PURE__*/_react.default.createElement("div", null, dropdownRender && dropdownRender(dropRender(childrenToRender, heightStyle))), isMultiple && /*#__PURE__*/_react.default.createElement("div", {
+    }, !dropdownRender && childrenToRender.length > 0 && dropRender(childrenToRender, heightStyle), renderNotContent(), /*#__PURE__*/_react.default.createElement("div", null, dropdownRender && dropdownRender(dropRender(childrenToRender, heightStyle))), isMultiple && /*#__PURE__*/_react.default.createElement("div", {
       className: multipleFooterCls
     }, /*#__PURE__*/_react.default.createElement(_index.Checkbox, {
       style: checkboxStyle,
@@ -625,15 +635,43 @@ var InternalSelect = function InternalSelect(props, ref) {
         disabled: disabled
       }, maxTagPlaceholder);
     }
-  }, [mulOptions]); // 渲染多选选择器 (待优化：多选框下拉按钮样式调整，限制tag数代码优化)
+  }, [mulOptions]);
+
+  var renderSingle = function renderSingle() {
+    var hiddenStyle = isShowSearch && !!searchValue || singleVal ? {
+      visibility: 'hidden'
+    } : undefined;
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+      className: singleCls,
+      ref: selectionRef
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      className: "".concat(selectPrefixCls, "-selection-search")
+    }, /*#__PURE__*/_react.default.createElement("input", {
+      ref: searchRef,
+      value: searchValue,
+      className: "".concat(selectPrefixCls, "-selection-search-input"),
+      onChange: handleSearchChange,
+      onFocus: handleFocus,
+      onBlur: handleBlur,
+      readOnly: !isShowSearch || !!disabled
+    })), singleVal && !searchValue && /*#__PURE__*/_react.default.createElement("span", {
+      className: "".concat(selectPrefixCls, "-selection-item")
+    }, singleVal), /*#__PURE__*/_react.default.createElement("span", {
+      className: "".concat(selectPrefixCls, "-placeholder"),
+      style: hiddenStyle
+    }, placeholder), /*#__PURE__*/_react.default.createElement("span", {
+      className: "".concat(selectPrefixCls, "-suffix")
+    }, renderSuffix())));
+  }; // 渲染多选选择器 (待优化：多选框下拉按钮样式调整，限制tag数代码优化)
+
 
   var renderMultiple = function renderMultiple() {
-    var _context3, _classNames11, _context4, _classNames12;
+    var _context3, _classNames10, _context4, _classNames11;
 
     var maxTagCount = selectProps.maxTagCount,
         maxTagPlaceholder = selectProps.maxTagPlaceholder;
-    var multipleCls = (0, _classnames.default)(commCls, (_classNames11 = {}, (0, _defineProperty2.default)(_classNames11, "".concat(selectPrefixCls, "-multiple-disabled"), disabled), (0, _defineProperty2.default)(_classNames11, (0, _concat.default)(_context3 = "".concat(selectPrefixCls, "-")).call(_context3, mode), mode), (0, _defineProperty2.default)(_classNames11, "".concat(selectPrefixCls, "-focused"), autoFocus || optionShow), (0, _defineProperty2.default)(_classNames11, "".concat(selectPrefixCls, "-placeholder"), placeholder && !mulOptions.length), _classNames11));
-    var itemCls = (0, _classnames.default)((_classNames12 = {}, (0, _defineProperty2.default)(_classNames12, "".concat(selectPrefixCls, "-selection-item"), true), (0, _defineProperty2.default)(_classNames12, (0, _concat.default)(_context4 = "".concat(selectPrefixCls, "-selection-item-")).call(_context4, size), size), _classNames12));
+    var multipleCls = (0, _classnames.default)(commCls, (_classNames10 = {}, (0, _defineProperty2.default)(_classNames10, "".concat(selectPrefixCls, "-multiple-disabled"), disabled), (0, _defineProperty2.default)(_classNames10, (0, _concat.default)(_context3 = "".concat(selectPrefixCls, "-")).call(_context3, mode), mode), (0, _defineProperty2.default)(_classNames10, "".concat(selectPrefixCls, "-focused"), autoFocus || optionShow), (0, _defineProperty2.default)(_classNames10, "".concat(selectPrefixCls, "-placeholder"), placeholder && !mulOptions.length), _classNames10));
+    var itemCls = (0, _classnames.default)((_classNames11 = {}, (0, _defineProperty2.default)(_classNames11, "".concat(selectPrefixCls, "-selection-item"), true), (0, _defineProperty2.default)(_classNames11, (0, _concat.default)(_context4 = "".concat(selectPrefixCls, "-selection-item-")).call(_context4, size), size), _classNames11));
     var TagStyle = {
       margin: '2px 8px 2px 0'
     };
@@ -659,14 +697,29 @@ var InternalSelect = function InternalSelect(props, ref) {
     }, /*#__PURE__*/_react.default.createElement("span", {
       className: "".concat(selectPrefixCls, "-selection-item-content")
     }, "\u5171", mulOptions.length, "\u9879")) : null), /*#__PURE__*/_react.default.createElement("span", {
+      className: "".concat(selectPrefixCls, "-selection-search"),
+      style: {
+        width: inputWidth
+      }
+    }, /*#__PURE__*/_react.default.createElement("input", {
+      ref: searchRef,
+      value: searchValue,
+      className: "".concat(selectPrefixCls, "-selection-search-input"),
+      onChange: handleSearchChange,
+      onFocus: handleFocus,
+      onBlur: handleBlur,
+      readOnly: !isShowSearch || !!disabled
+    }), /*#__PURE__*/_react.default.createElement("span", {
+      ref: measureRef,
+      className: "".concat(selectPrefixCls, "-selection-search-mirror")
+    }, searchValue, "\xA0")), /*#__PURE__*/_react.default.createElement("span", {
       className: "".concat(selectPrefixCls, "-placeholder")
-    }, !mulOptions.length && placeholder), /*#__PURE__*/_react.default.createElement("span", {
+    }, !mulOptions.length && !searchValue && placeholder), /*#__PURE__*/_react.default.createElement("span", {
       className: "".concat(selectPrefixCls, "-suffix")
     }, renderSuffix()));
   };
 
-  var singleCls = (0, _classnames.default)(commCls, (_classNames13 = {}, (0, _defineProperty2.default)(_classNames13, "".concat(selectPrefixCls, "-single"), true), (0, _defineProperty2.default)(_classNames13, "".concat(selectPrefixCls, "-single-disabled"), disabled), (0, _defineProperty2.default)(_classNames13, "".concat(selectPrefixCls, "-single-focused"), autoFocus && !disabled || optionShow), _classNames13));
-  var singleTextCls = (0, _classnames.default)((_classNames14 = {}, (0, _defineProperty2.default)(_classNames14, "".concat(selectPrefixCls, "-single-text"), true), (0, _defineProperty2.default)(_classNames14, "".concat(selectPrefixCls, "-single-disabled-text"), disabled), _classNames14));
+  var singleCls = (0, _classnames.default)(commCls, (_classNames12 = {}, (0, _defineProperty2.default)(_classNames12, "".concat(selectPrefixCls, "-single"), true), (0, _defineProperty2.default)(_classNames12, "".concat(selectPrefixCls, "-single-disabled"), disabled), (0, _defineProperty2.default)(_classNames12, "".concat(selectPrefixCls, "-single-focused"), autoFocus && !disabled || optionShow), _classNames12));
 
   var renderSelect = function renderSelect() {
     return /*#__PURE__*/_react.default.createElement("div", {
@@ -676,18 +729,18 @@ var InternalSelect = function InternalSelect(props, ref) {
     }, /*#__PURE__*/_react.default.createElement("span", {
       className: selectionCls,
       onClick: handleClick,
-      onFocus: handleFocus,
-      onBlur: handleBlur
-    }, !isMultiple ? /*#__PURE__*/_react.default.createElement("div", {
-      className: singleCls,
-      ref: selectionRef
-    }, /*#__PURE__*/_react.default.createElement("span", {
-      className: singleTextCls
-    }, singleVal || null), /*#__PURE__*/_react.default.createElement("span", {
-      className: "".concat(selectPrefixCls, "-placeholder")
-    }, !singleVal && placeholder), /*#__PURE__*/_react.default.createElement("span", {
-      className: "".concat(selectPrefixCls, "-suffix")
-    }, renderSuffix())) : renderMultiple()));
+      tabIndex: disabled ? -1 : 0,
+      onFocus: function onFocus() {
+        var _a;
+
+        return (_a = searchRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+      },
+      onBlur: function onBlur() {
+        var _a;
+
+        return (_a = searchRef.current) === null || _a === void 0 ? void 0 : _a.blur();
+      }
+    }, !isMultiple ? renderSingle() : renderMultiple()));
   };
 
   var catchStyle = function catchStyle() {