@kdcloudjs/kdesign 1.6.6 → 1.6.7

package/es/select/select.js

@@ -7,20 +7,20 @@ import _mapInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance
 import _findInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/find";
 import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
 import _spliceInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/splice";
-import React, { useContext, useRef, useEffect, useState, useCallback } from 'react';
+import React, { useContext, useRef, useEffect, useState, useCallback, useLayoutEffect, useMemo } from 'react';
 import { useMergedState } from '../_utils/hooks';
+import isBoolean from 'lodash/isBoolean';
 import classNames from 'classnames';
 import ConfigContext from '../config-provider/ConfigContext';
 import { getCompProps } from '../_utils';
 import { toArray } from '../_utils/react-children';
-import { Input, Icon, Checkbox, Tag } from '../index';
+import { Icon, Checkbox, Tag } from '../index';
 import Option from './option';
 import usePopper from '../_utils/usePopper';
+var INPUT_MIN_WIDTH = 4; // 输入框最小宽度
 
 var InternalSelect = function InternalSelect(props, ref) {
-  var _context, _classNames7, _classNames13, _classNames14;
-
-  var _a;
+  var _context, _classNames6, _classNames12;
 
   var _useContext = useContext(ConfigContext),
       getPrefixCls = _useContext.getPrefixCls,
@@ -56,6 +56,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'; // 是否多选
@@ -81,6 +84,8 @@ var InternalSelect = function InternalSelect(props, ref) {
     selectMulOpts: []
   }); // 多选ref已选中项
 
+  var measureRef = React.useRef(null);
+
   var _useState = useState([]),
       _useState2 = _slicedToArray(_useState, 2),
       mulOptions = _useState2[0],
@@ -95,18 +100,19 @@ var InternalSelect = function InternalSelect(props, ref) {
       _useState6 = _slicedToArray(_useState5, 2),
       optionShow = _useState6[0],
       setOptionShow = _useState6[1]; // 下拉列表是否展示
+  // const [searchInput, setSearchInput] = useState<string>('') // 搜索框值
 
 
   var _useState7 = useState(''),
       _useState8 = _slicedToArray(_useState7, 2),
-      searchInput = _useState8[0],
-      setSearchInput = _useState8[1]; // 搜索框值
+      searchValue = _useState8[0],
+      setSearchValue = _useState8[1]; // 搜索框定时器
 
 
-  var _useState9 = useState(null),
+  var _useState9 = useState(INPUT_MIN_WIDTH),
       _useState10 = _slicedToArray(_useState9, 2),
-      timer = _useState10[0],
-      setTimer = _useState10[1]; // 搜索框定时器
+      inputWidth = _useState10[0],
+      setInputWidth = _useState10[1]; // 输入框宽度
 
 
   var selectPrefixCls = getPrefixCls(prefixCls, 'select', customPrefixcls); // 选择器样式
@@ -114,15 +120,13 @@ var InternalSelect = function InternalSelect(props, ref) {
   var selectCls = classNames(selectPrefixCls, className, _defineProperty({}, "".concat(selectPrefixCls, "-visible"), optionShow));
   var selectionCls = classNames(_defineProperty({}, "".concat(selectPrefixCls, "-selector"), true)); // 下拉列表框样式
 
-  var dropDownCls = classNames(dropdownClassName, _defineProperty({}, "".concat(selectPrefixCls, "-dropdown"), true)); // 下拉搜索框样式
-
-  var searchCls = classNames(_defineProperty({}, "".concat(selectPrefixCls, "-dropdown-search"), true)); // 下拉子项列表样式
+  var dropDownCls = classNames(dropdownClassName, _defineProperty({}, "".concat(selectPrefixCls, "-dropdown"), true)); // 下拉子项列表样式
 
   var dropContentCls = classNames(_defineProperty({}, "".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 = classNames(_defineProperty({}, "".concat(selectPrefixCls, "-multiple-footer"), true)); // 多选，单选公共样式
 
-  var commCls = classNames((_classNames7 = {}, _defineProperty(_classNames7, "".concat(selectPrefixCls, "-bordered"), borderType === 'bordered'), _defineProperty(_classNames7, "".concat(selectPrefixCls, "-underline"), borderType === 'underline'), _defineProperty(_classNames7, "".concat(selectPrefixCls, "-borderless"), borderType === 'none'), _defineProperty(_classNames7, _concatInstanceProperty(_context = "".concat(selectPrefixCls, "-size-")).call(_context, size), size), _defineProperty(_classNames7, "".concat(selectPrefixCls, "-wrapper"), true), _classNames7));
+  var commCls = classNames((_classNames6 = {}, _defineProperty(_classNames6, "".concat(selectPrefixCls, "-bordered"), borderType === 'bordered'), _defineProperty(_classNames6, "".concat(selectPrefixCls, "-underline"), borderType === 'underline'), _defineProperty(_classNames6, "".concat(selectPrefixCls, "-borderless"), borderType === 'none'), _defineProperty(_classNames6, _concatInstanceProperty(_context = "".concat(selectPrefixCls, "-size-")).call(_context, size), size), _defineProperty(_classNames6, "".concat(selectPrefixCls, "-wrapper"), true), _classNames6));
   React.useEffect(function () {
     setOptionShow(!!props.visible);
   }, [props.visible]); // realchildren更新时数据处理---待解决
@@ -172,8 +176,6 @@ var InternalSelect = function InternalSelect(props, ref) {
     }
   }, [isMultiple, initValue, children, options]);
   useEffect(function () {
-    var _a;
-
     if (!isMultiple) {
       multipleRef.current.selectedVal = initValue; // 默认选中值
 
@@ -189,28 +191,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]);
   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]);
-  useEffect(function () {
-    handleClear();
-  }, [optionShow === false]);
+    if (optionShow === false) {
+      handleClear();
+    }
+  }, [optionShow]);
   var handleFocus = useCallback(function (e) {
+    e.stopPropagation();
     onFocus && onFocus(e);
   }, [onFocus]);
   var handleBlur = useCallback(function (e) {
+    e.stopPropagation();
     onBlur && onBlur(e);
   }, [onBlur]); // 点击组件
 
@@ -220,8 +221,7 @@ var InternalSelect = function InternalSelect(props, ref) {
     if (!optionShow) {
       var onDropdownVisibleChange = selectProps.onDropdownVisibleChange;
       onDropdownVisibleChange && onDropdownVisibleChange(!optionShow);
-    } // handleClear()
-
+    }
   };
 
   useEffect(function () {
@@ -234,11 +234,63 @@ var InternalSelect = function InternalSelect(props, ref) {
         e.stopPropagation();
       }
     });
-  }, []); // 点击下拉列表中某项回调
+  }, []);
+  useLayoutEffect(function () {
+    measureRef.current && setInputWidth(measureRef.current.scrollWidth);
+  }, [searchValue]);
+  var filledOptions = 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;
+    };
+
+    _mapInstanceProperty(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 = 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,
@@ -255,7 +307,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,
@@ -275,7 +326,8 @@ var InternalSelect = function InternalSelect(props, ref) {
           valArr.push(key);
           optsArr.push(_extends(_extends({}, 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
           }));
         }
 
@@ -300,11 +352,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
@@ -328,10 +379,9 @@ var InternalSelect = function InternalSelect(props, ref) {
 
         _selectMulOpts.push(_extends(_extends({}, 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(_toConsumableArray(_selectMulOpts));
       onChange && onChange(labelInValue ? _selectMulOpts : _selectedVal, _selectMulOpts);
@@ -339,11 +389,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
   }; // 多选模式下选中所有 与清除所有 (可以优化)
 
@@ -356,14 +404,13 @@ var InternalSelect = function InternalSelect(props, ref) {
     if ((realChildren === null || realChildren === void 0 ? void 0 : realChildren.length) !== selectedVal.length) {
       _mapInstanceProperty(realChildren).call(realChildren, function (child) {
         var _ref = child.props || child,
-            value = _ref.value,
-            children = _ref.children;
+            value = _ref.value;
 
         if (!_includesInstanceProperty(selectedVal).call(selectedVal, value)) {
           selectedVal.push(value);
           selectMulOpts.push({
             value: value,
-            label: children
+            label: getOptionLabel(child)
           });
         }
       });
@@ -376,45 +423,31 @@ var InternalSelect = function InternalSelect(props, ref) {
     }
 
     onChange && onChange(labelInValue ? selectMulOpts : selectedVal, selectMulOpts);
-  }; // 筛选内容 ---可以优化，抽成hook
-
+  }; // 输入框变化搜索内容
 
-  var handleSearch = 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 = 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 = 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('');
@@ -424,8 +457,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;
@@ -442,19 +474,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 = classNames((_classNames8 = {}, _defineProperty(_classNames8, "".concat(selectPrefixCls, "-icon-arrow"), true), _defineProperty(_classNames8, "".concat(selectPrefixCls, "-icon-arrow-up"), optionShow), _defineProperty(_classNames8, "".concat(selectPrefixCls, "-icon-arrow-down"), !optionShow), _defineProperty(_classNames8, "".concat(selectPrefixCls, "-icon-arrow-focus"), optionShow), _classNames8));
+    var arrowIconCls = classNames((_classNames7 = {}, _defineProperty(_classNames7, "".concat(selectPrefixCls, "-icon-arrow"), true), _defineProperty(_classNames7, "".concat(selectPrefixCls, "-icon-arrow-up"), optionShow), _defineProperty(_classNames7, "".concat(selectPrefixCls, "-icon-arrow-down"), !optionShow), _defineProperty(_classNames7, "".concat(selectPrefixCls, "-icon-arrow-focus"), optionShow), _classNames7));
     var iconShow = allowClear && !disabled && (isMultiple ? mulOptions.length > 0 : (selectedVal !== null && selectedVal !== void 0 ? selectedVal : '') !== '');
     var clearIconCls = classNames(_defineProperty({}, "".concat(selectPrefixCls, "-icon-clear"), true));
     return /*#__PURE__*/React.createElement(React.Fragment, null, iconShow && /*#__PURE__*/React.createElement("span", {
       onClick: handleReset,
       className: clearIconCls
     }, /*#__PURE__*/React.createElement(Icon, {
-      type: "close"
+      type: "close-solid"
     }) || clearIcon), showArrow && /*#__PURE__*/React.createElement("span", {
       className: arrowIconCls
     }, suffixIcon || /*#__PURE__*/React.createElement(Icon, {
@@ -497,30 +529,26 @@ var InternalSelect = function InternalSelect(props, ref) {
     var emptyListCls = classNames(_defineProperty({}, "".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.createElement("div", {
+    return (filledOptions === null || filledOptions === void 0 ? void 0 : filledOptions.length) === 0 && /*#__PURE__*/React.createElement("div", {
       className: emptyListCls
     }, emptyContent);
-  };
+  }; // const isShowSearch = useCallback(() => {
+  //   return !showSearch ? false : !!searchValue
+  // }, [showSearch, searchValue])
 
-  var isShowSearch = useCallback(function () {
-    if (isMultiple) {
-      return showSearch !== null && showSearch !== void 0 ? showSearch : true;
-    }
 
-    return showSearch !== null && showSearch !== void 0 ? showSearch : false;
-  }, [showSearch, isMultiple]); // 渲染下拉列表框
+  var isShowSearch = useMemo(function () {
+    return isBoolean(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 = _mapInstanceProperty(realChildren).call(realChildren, function (item, index) {
+    if (Array.isArray(childrenToRender) && childrenToRender.length > 0) {
+      childrenToRender = _mapInstanceProperty(childrenToRender).call(childrenToRender, function (item, index) {
         if (item === null || item === undefined) return;
         var temp = renderOption(item, index);
         return temp;
@@ -545,26 +573,7 @@ var InternalSelect = function InternalSelect(props, ref) {
       className: dropDownCls,
       style: dropDownStyle,
       ref: dropDownRef
-    }, isShowSearch() && /*#__PURE__*/React.createElement("div", {
-      className: searchCls
-    }, /*#__PURE__*/React.createElement(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.createElement("span", {
-        onClick: handleSearch
-      }, /*#__PURE__*/React.createElement(Icon, {
-        type: "search"
-      }) || searchIcon),
-      suffix: searchInput && /*#__PURE__*/React.createElement("span", {
-        onClick: handleClear
-      }, /*#__PURE__*/React.createElement(Icon, {
-        type: "close"
-      })),
-      onChange: handleSearchChange
-    })), !dropdownRender && realChildren.length > 0 && dropRender(childrenToRender, heightStyle), renderNotContent(), /*#__PURE__*/React.createElement("div", null, dropdownRender && dropdownRender(dropRender(childrenToRender, heightStyle))), isMultiple && /*#__PURE__*/React.createElement("div", {
+    }, !dropdownRender && childrenToRender.length > 0 && dropRender(childrenToRender, heightStyle), renderNotContent(), /*#__PURE__*/React.createElement("div", null, dropdownRender && dropdownRender(dropRender(childrenToRender, heightStyle))), isMultiple && /*#__PURE__*/React.createElement("div", {
       className: multipleFooterCls
     }, /*#__PURE__*/React.createElement(Checkbox, {
       style: checkboxStyle,
@@ -598,15 +607,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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      className: singleCls,
+      ref: selectionRef
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "".concat(selectPrefixCls, "-selection-search")
+    }, /*#__PURE__*/React.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.createElement("span", {
+      className: "".concat(selectPrefixCls, "-selection-item")
+    }, singleVal), /*#__PURE__*/React.createElement("span", {
+      className: "".concat(selectPrefixCls, "-placeholder"),
+      style: hiddenStyle
+    }, placeholder), /*#__PURE__*/React.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 = classNames(commCls, (_classNames11 = {}, _defineProperty(_classNames11, "".concat(selectPrefixCls, "-multiple-disabled"), disabled), _defineProperty(_classNames11, _concatInstanceProperty(_context3 = "".concat(selectPrefixCls, "-")).call(_context3, mode), mode), _defineProperty(_classNames11, "".concat(selectPrefixCls, "-focused"), autoFocus || optionShow), _defineProperty(_classNames11, "".concat(selectPrefixCls, "-placeholder"), placeholder && !mulOptions.length), _classNames11));
-    var itemCls = classNames((_classNames12 = {}, _defineProperty(_classNames12, "".concat(selectPrefixCls, "-selection-item"), true), _defineProperty(_classNames12, _concatInstanceProperty(_context4 = "".concat(selectPrefixCls, "-selection-item-")).call(_context4, size), size), _classNames12));
+    var multipleCls = classNames(commCls, (_classNames10 = {}, _defineProperty(_classNames10, "".concat(selectPrefixCls, "-multiple-disabled"), disabled), _defineProperty(_classNames10, _concatInstanceProperty(_context3 = "".concat(selectPrefixCls, "-")).call(_context3, mode), mode), _defineProperty(_classNames10, "".concat(selectPrefixCls, "-focused"), autoFocus || optionShow), _defineProperty(_classNames10, "".concat(selectPrefixCls, "-placeholder"), placeholder && !mulOptions.length), _classNames10));
+    var itemCls = classNames((_classNames11 = {}, _defineProperty(_classNames11, "".concat(selectPrefixCls, "-selection-item"), true), _defineProperty(_classNames11, _concatInstanceProperty(_context4 = "".concat(selectPrefixCls, "-selection-item-")).call(_context4, size), size), _classNames11));
     var TagStyle = {
       margin: '2px 8px 2px 0'
     };
@@ -632,14 +669,29 @@ var InternalSelect = function InternalSelect(props, ref) {
     }, /*#__PURE__*/React.createElement("span", {
       className: "".concat(selectPrefixCls, "-selection-item-content")
     }, "\u5171", mulOptions.length, "\u9879")) : null), /*#__PURE__*/React.createElement("span", {
+      className: "".concat(selectPrefixCls, "-selection-search"),
+      style: {
+        width: inputWidth
+      }
+    }, /*#__PURE__*/React.createElement("input", {
+      ref: searchRef,
+      value: searchValue,
+      className: "".concat(selectPrefixCls, "-selection-search-input"),
+      onChange: handleSearchChange,
+      onFocus: handleFocus,
+      onBlur: handleBlur,
+      readOnly: !isShowSearch || !!disabled
+    }), /*#__PURE__*/React.createElement("span", {
+      ref: measureRef,
+      className: "".concat(selectPrefixCls, "-selection-search-mirror")
+    }, searchValue, "\xA0")), /*#__PURE__*/React.createElement("span", {
       className: "".concat(selectPrefixCls, "-placeholder")
-    }, !mulOptions.length && placeholder), /*#__PURE__*/React.createElement("span", {
+    }, !mulOptions.length && !searchValue && placeholder), /*#__PURE__*/React.createElement("span", {
       className: "".concat(selectPrefixCls, "-suffix")
     }, renderSuffix()));
   };
 
-  var singleCls = classNames(commCls, (_classNames13 = {}, _defineProperty(_classNames13, "".concat(selectPrefixCls, "-single"), true), _defineProperty(_classNames13, "".concat(selectPrefixCls, "-single-disabled"), disabled), _defineProperty(_classNames13, "".concat(selectPrefixCls, "-single-focused"), autoFocus && !disabled || optionShow), _classNames13));
-  var singleTextCls = classNames((_classNames14 = {}, _defineProperty(_classNames14, "".concat(selectPrefixCls, "-single-text"), true), _defineProperty(_classNames14, "".concat(selectPrefixCls, "-single-disabled-text"), disabled), _classNames14));
+  var singleCls = classNames(commCls, (_classNames12 = {}, _defineProperty(_classNames12, "".concat(selectPrefixCls, "-single"), true), _defineProperty(_classNames12, "".concat(selectPrefixCls, "-single-disabled"), disabled), _defineProperty(_classNames12, "".concat(selectPrefixCls, "-single-focused"), autoFocus && !disabled || optionShow), _classNames12));
 
   var renderSelect = function renderSelect() {
     return /*#__PURE__*/React.createElement("div", {
@@ -649,18 +701,18 @@ var InternalSelect = function InternalSelect(props, ref) {
     }, /*#__PURE__*/React.createElement("span", {
       className: selectionCls,
       onClick: handleClick,
-      onFocus: handleFocus,
-      onBlur: handleBlur
-    }, !isMultiple ? /*#__PURE__*/React.createElement("div", {
-      className: singleCls,
-      ref: selectionRef
-    }, /*#__PURE__*/React.createElement("span", {
-      className: singleTextCls
-    }, singleVal || null), /*#__PURE__*/React.createElement("span", {
-      className: "".concat(selectPrefixCls, "-placeholder")
-    }, !singleVal && placeholder), /*#__PURE__*/React.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() {