@kdcloudjs/kdesign 1.7.29 → 1.7.30

package/es/checkbox/checkbox.js

@@ -97,6 +97,17 @@ var InternalCheckbox = function InternalCheckbox(props, ref) {
   }, []);
   var getDefaultCheckbox = function getDefaultCheckbox() {
     var _context20, _context21;
+    var inputProps = {
+      type: 'checkbox',
+      className: inputClassName,
+      onChange: handleChange,
+      checked: selected,
+      disabled: mergedDisabled,
+      name: mergedName
+    };
+    if ((value !== null && value !== void 0 ? value : '') !== '') {
+      inputProps.value = value;
+    }
     return (
       /*#__PURE__*/
       // eslint-disable-next-line
@@ -106,30 +117,24 @@ var InternalCheckbox = function InternalCheckbox(props, ref) {
         ref: labelRef
       }, rest), /*#__PURE__*/React.createElement("span", {
         className: checkedWrapperClassName
-      }, selected && /*#__PURE__*/React.createElement("span", {
+      }, selected ? /*#__PURE__*/React.createElement("span", {
         className: innerIconClassName
       }, /*#__PURE__*/React.createElement(Icon, {
         type: "right-bold",
         className: _concatInstanceProperty(_context20 = "".concat(checkboxPrefixCls, "-")).call(_context20, mergedCheckboxType, "-inner-icon")
-      })), /*#__PURE__*/React.createElement("input", {
+      })) : null, /*#__PURE__*/React.createElement("input", _extends({
         type: "checkbox",
-        className: inputClassName,
-        onChange: handleChange,
-        ref: ref,
-        value: value,
-        checked: selected,
-        disabled: mergedDisabled,
-        name: mergedName
-      })), children && /*#__PURE__*/React.createElement("span", {
+        ref: ref
+      }, inputProps))), children ? /*#__PURE__*/React.createElement("span", {
         className: "".concat(checkboxPrefixCls, "-children")
-      }, children), !isDefaultType() && /*#__PURE__*/React.createElement("span", {
+      }, children) : null, !isDefaultType() ? /*#__PURE__*/React.createElement("span", {
         className: triangleClassName
       }, /*#__PURE__*/React.createElement("span", {
         className: innerIconClassName
       }, /*#__PURE__*/React.createElement(Icon, {
         type: "right-bold",
         className: _concatInstanceProperty(_context21 = "".concat(checkboxPrefixCls, "-")).call(_context21, mergedCheckboxType, "-inner-icon")
-      }))))
+      }))) : null)
     );
   };
   return getDefaultCheckbox();

package/es/city-picker/city-picker.js

@@ -23,7 +23,7 @@ var getCityId = function getCityId(data) {
   return data;
 };
 var InternalSelect = function InternalSelect(props, ref) {
-  var _context, _classNames3, _classNames5;
+  var _context, _classNames3, _classNames6;
   var _useContext = useContext(ConfigContext),
     getPrefixCls = _useContext.getPrefixCls,
     prefixCls = _useContext.prefixCls,
@@ -102,14 +102,18 @@ var InternalSelect = function InternalSelect(props, ref) {
     _useState6 = _slicedToArray(_useState5, 2),
     focusd = _useState6[0],
     setFocusd = _useState6[1];
-  var _useState7 = useState(null),
+  var _useState7 = useState(false),
     _useState8 = _slicedToArray(_useState7, 2),
-    seletedCity = _useState8[0],
-    setSeletedCity = _useState8[1];
-  var _useState9 = useState('domestic'),
+    afterChangeFocus = _useState8[0],
+    setAfterChangeFocus = _useState8[1];
+  var _useState9 = useState(null),
     _useState10 = _slicedToArray(_useState9, 2),
-    tabsValue = _useState10[0],
-    setTabsValue = _useState10[1];
+    seletedCity = _useState10[0],
+    setSeletedCity = _useState10[1];
+  var _useState11 = useState('domestic'),
+    _useState12 = _slicedToArray(_useState11, 2),
+    tabsValue = _useState12[0],
+    setTabsValue = _useState12[1];
   var isDomestic = function isDomestic(type) {
     return type === 'domestic';
   };
@@ -144,6 +148,7 @@ var InternalSelect = function InternalSelect(props, ref) {
   var handleBlur = useCallback(function (e) {
     e.stopPropagation();
     setFocusd(false);
+    setAfterChangeFocus(false);
     onBlur && onBlur(e);
   }, [onBlur]);
   useEffect(function () {
@@ -193,7 +198,7 @@ var InternalSelect = function InternalSelect(props, ref) {
       className: "".concat(selectPrefixCls, "-icon-clear"),
       ref: clearRef
     }, clearIcon || /*#__PURE__*/React.createElement(Icon, {
-      type: "close-solid"
+      type: "close"
     })), showArrow && /*#__PURE__*/React.createElement("span", {
       className: arrowIconCls
     }, suffixIcon || /*#__PURE__*/React.createElement(Icon, {
@@ -224,9 +229,12 @@ var InternalSelect = function InternalSelect(props, ref) {
     }));
   };
   var handleOption = function handleOption(city) {
+    var _a;
     handleVisibleChange(false);
     city.type = tabsValue === 'domestic' ? 'domestic' : 'foreign';
     (city === null || city === void 0 ? void 0 : city.id) !== initValue && (onChange === null || onChange === void 0 ? void 0 : onChange(city === null || city === void 0 ? void 0 : city.id, city));
+    (_a = searchRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    setAfterChangeFocus(true);
     if (typeof value === 'undefined') {
       setSeletedCity(city);
       setInitValue(city === null || city === void 0 ? void 0 : city.id);
@@ -239,7 +247,10 @@ var InternalSelect = function InternalSelect(props, ref) {
     }
     return /*#__PURE__*/React.createElement("div", {
       className: "".concat(selectPrefixCls, "-list"),
-      ref: optionsListRef
+      ref: optionsListRef,
+      onMouseDown: function onMouseDown(e) {
+        return e === null || e === void 0 ? void 0 : e.preventDefault();
+      }
     }, _mapInstanceProperty(data).call(data, function (item, index) {
       return /*#__PURE__*/React.createElement(Option, {
         key: item.id,
@@ -310,9 +321,11 @@ var InternalSelect = function InternalSelect(props, ref) {
     }
   }, [type, tabsValue]);
   var renderSingle = function renderSingle() {
+    var _classNames5;
     var hiddenStyle = !!searchValue || (initValue !== null && initValue !== void 0 ? initValue : '') !== '' ? {
       visibility: 'hidden'
     } : undefined;
+    var itemCls = classNames((_classNames5 = {}, _defineProperty(_classNames5, "".concat(selectPrefixCls, "-content-item"), true), _defineProperty(_classNames5, "".concat(selectPrefixCls, "-content-item-seleted"), afterChangeFocus), _classNames5));
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
       className: singleCls,
       ref: selectionRef
@@ -329,18 +342,18 @@ var InternalSelect = function InternalSelect(props, ref) {
       onBlur: handleBlur,
       readOnly: !!disabled
     }), !searchValue && /*#__PURE__*/React.createElement("span", {
-      className: "".concat(selectPrefixCls, "-content-item"),
+      className: itemCls,
       title: seletedCity === null || seletedCity === void 0 ? void 0 : seletedCity.name
     }, seletedCity === null || seletedCity === void 0 ? void 0 : seletedCity.name)), !searchValue && /*#__PURE__*/React.createElement("span", {
       className: "".concat(selectPrefixCls, "-content-info")
     }, _renderCityInfo(seletedCity))), /*#__PURE__*/React.createElement("span", {
       className: "".concat(selectPrefixCls, "-placeholder"),
       style: hiddenStyle
-    }, placeholder), /*#__PURE__*/React.createElement("span", {
+    }, !disabled ? placeholder : null), /*#__PURE__*/React.createElement("span", {
       className: "".concat(selectPrefixCls, "-suffix")
     }, renderSuffix())));
   };
-  var singleCls = classNames(commCls, (_classNames5 = {}, _defineProperty(_classNames5, "".concat(selectPrefixCls, "-disabled"), disabled), _defineProperty(_classNames5, "".concat(selectPrefixCls, "-focused"), !disabled && focusd || optionShow), _classNames5));
+  var singleCls = classNames(commCls, (_classNames6 = {}, _defineProperty(_classNames6, "".concat(selectPrefixCls, "-disabled"), disabled), _defineProperty(_classNames6, "".concat(selectPrefixCls, "-focused"), !disabled && focusd || optionShow), _classNames6));
   useEffect(function () {
     if (optionShow && !disabled) {
       var onDropdownVisibleChange = selectProps.onDropdownVisibleChange;
@@ -377,16 +390,17 @@ var InternalSelect = function InternalSelect(props, ref) {
     }
     return -1;
   };
-  var _useState11 = useState(getActiveIndex(0)),
-    _useState12 = _slicedToArray(_useState11, 2),
-    activeIndex = _useState12[0],
-    setActiveIndex = _useState12[1];
+  var _useState13 = useState(-1),
+    _useState14 = _slicedToArray(_useState13, 2),
+    activeIndex = _useState14[0],
+    setActiveIndex = _useState14[1];
   var initActiveIndex = function initActiveIndex() {
-    setActiveIndex(getActiveIndex(0));
+    var index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : undefined;
+    setActiveIndex(index === undefined ? getActiveIndex(0) : index);
   };
   useEffect(function () {
-    initActiveIndex();
-  }, [searchValue, tabsValue]);
+    initActiveIndex(searchValue ? undefined : -1);
+  }, [searchValue, tabsValue, curkeyboardList]);
   var onInternalKeyDown = function onInternalKeyDown(e) {
     var _a, _b, _c;
     var which = e.which;
@@ -410,11 +424,11 @@ var InternalSelect = function InternalSelect(props, ref) {
             var item = curkeyboardList[activeIndex];
             if (!item) return;
             handleOption(item);
-            setOptionShow(false);
+            handleVisibleChange(false);
             break;
           }
         case KeyCode.ESC:
-          setOptionShow(false);
+          handleVisibleChange(false);
           break;
         default:
           break;
@@ -470,7 +484,7 @@ var InternalSelect = function InternalSelect(props, ref) {
   };
   var handleVisibleChange = function handleVisibleChange(visible) {
     if (!visible) {
-      initActiveIndex();
+      initActiveIndex(-1);
     }
     if (visible !== optionShow) {
       props.visible === undefined && setOptionShow(visible);

package/es/city-picker/style/index.css

@@ -170,6 +170,7 @@
   background: #fff;
   -webkit-transition: opacity 0.15s ease;
   transition: opacity 0.15s ease;
+  font-size: var(--kd-c-city-picker-icon-clear-font-size, 16px);
 }
 .kd-city-picker-icon-clear:hover {
   color: var(--kd-c-city-picker-color-border-hover, var(--kd-g-color-theme, #5582f3));
@@ -239,10 +240,10 @@
   opacity: 1;
 }
 .kd-city-picker-wrapper .kd-city-picker-icon-clear {
-  color: var(--kd-c-city-picker-icon-clear-color-text, #d9d9d9);
+  color: var(--kd-c-city-picker-icon-clear-color-text, #666666);
 }
 .kd-city-picker-wrapper .kd-city-picker-icon-clear:hover {
-  color: var(--kd-c-city-picker-icon-clear-color-text-hover, #999);
+  color: var(--kd-c-city-picker-icon-clear-color-text-hover, var(--kd-g-color-theme, #5582f3));
 }
 .kd-city-picker-show-search {
   cursor: text;
@@ -419,7 +420,7 @@
 .kd-city-picker-focused {
   border-color: var(--kd-c-city-picker-color-border-foucs, var(--kd-g-color-theme, #5582f3)) !important;
 }
-.kd-city-picker-focused .kd-city-picker-content-item {
+.kd-city-picker-focused .kd-city-picker-content-item:not(.kd-city-picker-content-item-seleted) {
   color: var(--kd-c-city-picker-placeholder-color-text, #b2b2b2);
 }
 .kd-city-picker-disabled {

package/es/city-picker/style/index.less

@@ -61,6 +61,7 @@
       top: 0;
       background: #fff;
       transition: opacity 0.15s ease;
+      font-size: @city-picker-clear-font-size;
       &:hover {
         color: @city-picker-g-color-border-hover;
       }
@@ -297,7 +298,7 @@
   &-focused {
     .focusColor();
 
-    .@{city-picker-prefix-cls}-content-item {
+    .@{city-picker-prefix-cls}-content-item:not(.@{city-picker-prefix-cls}-content-item-seleted) {
       color: @city-picker-placeholder-color;
     }
   }

package/es/city-picker/style/token.less

@@ -17,8 +17,8 @@
 @city-picker-color-background-disabled: var(~'@{city-picker-custom-prefix}-color-background-disabled', #fff);
 @city-picker-color-text-disabled: var(~'@{city-picker-custom-prefix}-color-text-disabled', @color-disabled);
 @city-picker-arrow-icon-color-text-disabled: var(~'@{city-picker-custom-prefix}-arrow-icon-color-text-disabled', #b2b2b2);
-@city-picker-clear-color: var(~'@{city-picker-custom-prefix}-icon-clear-color-text', #d9d9d9);
-@city-picker-clear-color-hover: var(~'@{city-picker-custom-prefix}-icon-clear-color-text-hover', #999);
+@city-picker-clear-color: var(~'@{city-picker-custom-prefix}-icon-clear-color-text', #666666);
+@city-picker-clear-color-hover: var(~'@{city-picker-custom-prefix}-icon-clear-color-text-hover', @color-theme);
 @city-picker-list-item-color-selected: var(~'@{city-picker-custom-prefix}-list-item-color-text-selected', @color-theme);
 @city-picker-highlight-color: var(~'@{city-picker-custom-prefix}-highlight-color-text', @color-theme);
 
@@ -27,6 +27,7 @@
 @city-picker-large-font-size: var(~'@{city-picker-custom-prefix}-font-size-large', 16px); // 大号字体
 @city-picker-middle-font-size: var(~'@{city-picker-custom-prefix}-font-size-middle', 14px); // 中号高度
 @city-picker-small-font-size: var(~'@{city-picker-custom-prefix}-font-size-small', 12px); // 小号高度
+@city-picker-clear-font-size: var(~'@{city-picker-custom-prefix}-icon-clear-font-size', 16px);
 
 // line-height
 @city-picker-dropdown-line-height: var(~'@{city-picker-custom-prefix}-dropdown-line-height', 22px);

package/es/grid/row.js

@@ -76,9 +76,9 @@ var Row = function Row(props) {
   }
   var rowStyle = {
     'row-gap': "".concat(gap.v, "px"),
-    margin: "0 ".concat(-1 * gap.h, "px")
+    margin: "0 ".concat(-1 * gap.h / 2, "px")
   };
-  if (gap.v && isSogouOrIe) rowStyle['margin-bottom'] = "".concat(-1 * gap.v / 2, "px");
+  if (gap.v && isSogouOrIe) rowStyle['margin-bottom'] = "".concat(-1 * gap.v, "px");
   var toalign = {
     top: 'flex-start',
     middle: 'center',

package/es/select/select.js

@@ -456,7 +456,7 @@ var InternalSelect = function InternalSelect(props, ref) {
     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 : (singleVal !== null && singleVal !== void 0 ? singleVal : '') !== '') || searchValue);
     var clearIconCls = classNames(_defineProperty({}, "".concat(selectPrefixCls, "-icon-clear"), true));
-    return /*#__PURE__*/React.createElement(React.Fragment, null, iconShow && /*#__PURE__*/React.createElement("span", {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, iconShow ? /*#__PURE__*/React.createElement("span", {
       onClick: handleReset,
       onMouseDown: function onMouseDown(e) {
         return e.preventDefault();
@@ -465,11 +465,11 @@ var InternalSelect = function InternalSelect(props, ref) {
       ref: clearRef
     }, clearIcon || /*#__PURE__*/React.createElement(Icon, {
       type: "close-solid"
-    })), showArrow && /*#__PURE__*/React.createElement("span", {
+    })) : null, showArrow ? /*#__PURE__*/React.createElement("span", {
       className: arrowIconCls
     }, suffixIcon || /*#__PURE__*/React.createElement(Icon, {
       type: "arrow-down"
-    })));
+    })) : null);
   };
   var renderOption = function renderOption(child, index) {
     if ((child === null || child === void 0 ? void 0 : child.props) && (child.type.displayName === 'Option' || child.type.name === 'Option')) {
@@ -568,7 +568,7 @@ var InternalSelect = function InternalSelect(props, ref) {
       className: dropDownCls,
       style: dropdownStyle,
       ref: dropDownRef
-    }, !dropdownRender && childrenToRender.length > 0 && dropRender(eleOptionList, heightStyle), renderNotContent(), /*#__PURE__*/React.createElement("div", null, dropdownRender && dropdownRender(dropRender(childrenToRender, heightStyle))), isMultiple && realChildren.length > 0 && /*#__PURE__*/React.createElement("div", {
+    }, !dropdownRender && childrenToRender.length > 0 ? dropRender(eleOptionList, heightStyle) : null, renderNotContent(), /*#__PURE__*/React.createElement("div", null, dropdownRender ? dropdownRender(dropRender(childrenToRender, heightStyle)) : null), isMultiple && realChildren.length > 0 ? /*#__PURE__*/React.createElement("div", {
       className: multipleFooterCls
     }, /*#__PURE__*/React.createElement(Checkbox, {
       style: checkboxStyle,
@@ -577,7 +577,7 @@ var InternalSelect = function InternalSelect(props, ref) {
       onChange: handleSelectAll
     }, "\u5168\u9009"), /*#__PURE__*/React.createElement("span", {
       className: "".concat(selectPrefixCls, "-multiple-footer-hadSelected")
-    }, "\u5DF2\u9009", /*#__PURE__*/React.createElement("span", null, selectedVal.length), "\u9879"))));
+    }, "\u5DF2\u9009", /*#__PURE__*/React.createElement("span", null, selectedVal.length), "\u9879")) : null));
   };
   // 处理多选tag
   var handleMaxTagHolder = useCallback(function () {
@@ -652,10 +652,10 @@ var InternalSelect = function InternalSelect(props, ref) {
     return /*#__PURE__*/React.createElement("div", {
       className: multipleCls,
       ref: selectionRef
-    }, Array.isArray(mulOptions) && /*#__PURE__*/React.createElement(React.Fragment, null, _mapInstanceProperty(mulOptions).call(mulOptions, function (item, index) {
+    }, Array.isArray(mulOptions) ? /*#__PURE__*/React.createElement(React.Fragment, null, _mapInstanceProperty(mulOptions).call(mulOptions, function (item, index) {
       var label = item.label,
         value = item.value;
-      return (!maxTagCount || index <= maxTagCount - 1) && /*#__PURE__*/React.createElement("span", {
+      return !maxTagCount || index <= maxTagCount - 1 ? /*#__PURE__*/React.createElement("span", {
         key: value,
         className: classNames("".concat(selectPrefixCls, "-selection-tag")),
         onMouseDown: function onMouseDown(e) {
@@ -677,12 +677,12 @@ var InternalSelect = function InternalSelect(props, ref) {
           return handleRemove(e, value);
         },
         "data-tag": value
-      }, label));
+      }, label)) : null;
     }), maxTagCount && mulOptions.length > maxTagCount ? maxTagPlaceholder ? handleMaxTagHolder() : /*#__PURE__*/React.createElement("span", {
       className: itemCls
     }, /*#__PURE__*/React.createElement("span", {
       className: "".concat(selectPrefixCls, "-selection-item-content")
-    }, "\u5171", mulOptions.length, "\u9879")) : null), /*#__PURE__*/React.createElement("span", {
+    }, "\u5171", mulOptions.length, "\u9879")) : null) : null, /*#__PURE__*/React.createElement("span", {
       className: "".concat(selectPrefixCls, "-selection-search"),
       style: {
         width: inputWidth
@@ -700,7 +700,7 @@ var InternalSelect = function InternalSelect(props, ref) {
       className: "".concat(selectPrefixCls, "-selection-search-mirror")
     }, searchValue, "\xA0")), /*#__PURE__*/React.createElement("span", {
       className: "".concat(selectPrefixCls, "-placeholder")
-    }, !mulOptions.length && !searchValue && placeholder), /*#__PURE__*/React.createElement("span", {
+    }, !mulOptions.length && !searchValue ? placeholder : null), /*#__PURE__*/React.createElement("span", {
       className: "".concat(selectPrefixCls, "-suffix")
     }, renderSuffix()));
   };

package/lib/checkbox/checkbox.js

@@ -109,6 +109,17 @@ var InternalCheckbox = function InternalCheckbox(props, ref) {
   }, []);
   var getDefaultCheckbox = function getDefaultCheckbox() {
     var _context20, _context21;
+    var inputProps = {
+      type: 'checkbox',
+      className: inputClassName,
+      onChange: handleChange,
+      checked: selected,
+      disabled: mergedDisabled,
+      name: mergedName
+    };
+    if ((value !== null && value !== void 0 ? value : '') !== '') {
+      inputProps.value = value;
+    }
     return (
       /*#__PURE__*/
       // eslint-disable-next-line
@@ -118,30 +129,24 @@ var InternalCheckbox = function InternalCheckbox(props, ref) {
         ref: labelRef
       }, rest), /*#__PURE__*/_react.default.createElement("span", {
         className: checkedWrapperClassName
-      }, selected && /*#__PURE__*/_react.default.createElement("span", {
+      }, selected ? /*#__PURE__*/_react.default.createElement("span", {
         className: innerIconClassName
       }, /*#__PURE__*/_react.default.createElement(_icon.default, {
         type: "right-bold",
         className: (0, _concat.default)(_context20 = "".concat(checkboxPrefixCls, "-")).call(_context20, mergedCheckboxType, "-inner-icon")
-      })), /*#__PURE__*/_react.default.createElement("input", {
+      })) : null, /*#__PURE__*/_react.default.createElement("input", (0, _extends2.default)({
         type: "checkbox",
-        className: inputClassName,
-        onChange: handleChange,
-        ref: ref,
-        value: value,
-        checked: selected,
-        disabled: mergedDisabled,
-        name: mergedName
-      })), children && /*#__PURE__*/_react.default.createElement("span", {
+        ref: ref
+      }, inputProps))), children ? /*#__PURE__*/_react.default.createElement("span", {
         className: "".concat(checkboxPrefixCls, "-children")
-      }, children), !isDefaultType() && /*#__PURE__*/_react.default.createElement("span", {
+      }, children) : null, !isDefaultType() ? /*#__PURE__*/_react.default.createElement("span", {
         className: triangleClassName
       }, /*#__PURE__*/_react.default.createElement("span", {
         className: innerIconClassName
       }, /*#__PURE__*/_react.default.createElement(_icon.default, {
         type: "right-bold",
         className: (0, _concat.default)(_context21 = "".concat(checkboxPrefixCls, "-")).call(_context21, mergedCheckboxType, "-inner-icon")
-      }))))
+      }))) : null)
     );
   };
   return getDefaultCheckbox();

package/lib/city-picker/city-picker.js

@@ -35,7 +35,7 @@ var getCityId = function getCityId(data) {
   return data;
 };
 var InternalSelect = function InternalSelect(props, ref) {
-  var _context, _classNames3, _classNames5;
+  var _context, _classNames3, _classNames6;
   var _useContext = (0, _react.useContext)(_ConfigContext.default),
     getPrefixCls = _useContext.getPrefixCls,
     prefixCls = _useContext.prefixCls,
@@ -114,14 +114,18 @@ var InternalSelect = function InternalSelect(props, ref) {
     _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
     focusd = _useState6[0],
     setFocusd = _useState6[1];
-  var _useState7 = (0, _react.useState)(null),
+  var _useState7 = (0, _react.useState)(false),
     _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
-    seletedCity = _useState8[0],
-    setSeletedCity = _useState8[1];
-  var _useState9 = (0, _react.useState)('domestic'),
+    afterChangeFocus = _useState8[0],
+    setAfterChangeFocus = _useState8[1];
+  var _useState9 = (0, _react.useState)(null),
     _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
-    tabsValue = _useState10[0],
-    setTabsValue = _useState10[1];
+    seletedCity = _useState10[0],
+    setSeletedCity = _useState10[1];
+  var _useState11 = (0, _react.useState)('domestic'),
+    _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
+    tabsValue = _useState12[0],
+    setTabsValue = _useState12[1];
   var isDomestic = function isDomestic(type) {
     return type === 'domestic';
   };
@@ -156,6 +160,7 @@ var InternalSelect = function InternalSelect(props, ref) {
   var handleBlur = (0, _react.useCallback)(function (e) {
     e.stopPropagation();
     setFocusd(false);
+    setAfterChangeFocus(false);
     onBlur && onBlur(e);
   }, [onBlur]);
   (0, _react.useEffect)(function () {
@@ -205,7 +210,7 @@ var InternalSelect = function InternalSelect(props, ref) {
       className: "".concat(selectPrefixCls, "-icon-clear"),
       ref: clearRef
     }, clearIcon || /*#__PURE__*/_react.default.createElement(_index.Icon, {
-      type: "close-solid"
+      type: "close"
     })), showArrow && /*#__PURE__*/_react.default.createElement("span", {
       className: arrowIconCls
     }, suffixIcon || /*#__PURE__*/_react.default.createElement(_index.Icon, {
@@ -236,9 +241,12 @@ var InternalSelect = function InternalSelect(props, ref) {
     }));
   };
   var handleOption = function handleOption(city) {
+    var _a;
     handleVisibleChange(false);
     city.type = tabsValue === 'domestic' ? 'domestic' : 'foreign';
     (city === null || city === void 0 ? void 0 : city.id) !== initValue && (onChange === null || onChange === void 0 ? void 0 : onChange(city === null || city === void 0 ? void 0 : city.id, city));
+    (_a = searchRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    setAfterChangeFocus(true);
     if (typeof value === 'undefined') {
       setSeletedCity(city);
       setInitValue(city === null || city === void 0 ? void 0 : city.id);
@@ -251,7 +259,10 @@ var InternalSelect = function InternalSelect(props, ref) {
     }
     return /*#__PURE__*/_react.default.createElement("div", {
       className: "".concat(selectPrefixCls, "-list"),
-      ref: optionsListRef
+      ref: optionsListRef,
+      onMouseDown: function onMouseDown(e) {
+        return e === null || e === void 0 ? void 0 : e.preventDefault();
+      }
     }, (0, _map.default)(data).call(data, function (item, index) {
       return /*#__PURE__*/_react.default.createElement(_option.default, {
         key: item.id,
@@ -322,9 +333,11 @@ var InternalSelect = function InternalSelect(props, ref) {
     }
   }, [type, tabsValue]);
   var renderSingle = function renderSingle() {
+    var _classNames5;
     var hiddenStyle = !!searchValue || (initValue !== null && initValue !== void 0 ? initValue : '') !== '' ? {
       visibility: 'hidden'
     } : undefined;
+    var itemCls = (0, _classnames.default)((_classNames5 = {}, (0, _defineProperty2.default)(_classNames5, "".concat(selectPrefixCls, "-content-item"), true), (0, _defineProperty2.default)(_classNames5, "".concat(selectPrefixCls, "-content-item-seleted"), afterChangeFocus), _classNames5));
     return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
       className: singleCls,
       ref: selectionRef
@@ -341,18 +354,18 @@ var InternalSelect = function InternalSelect(props, ref) {
       onBlur: handleBlur,
       readOnly: !!disabled
     }), !searchValue && /*#__PURE__*/_react.default.createElement("span", {
-      className: "".concat(selectPrefixCls, "-content-item"),
+      className: itemCls,
       title: seletedCity === null || seletedCity === void 0 ? void 0 : seletedCity.name
     }, seletedCity === null || seletedCity === void 0 ? void 0 : seletedCity.name)), !searchValue && /*#__PURE__*/_react.default.createElement("span", {
       className: "".concat(selectPrefixCls, "-content-info")
     }, _renderCityInfo(seletedCity))), /*#__PURE__*/_react.default.createElement("span", {
       className: "".concat(selectPrefixCls, "-placeholder"),
       style: hiddenStyle
-    }, placeholder), /*#__PURE__*/_react.default.createElement("span", {
+    }, !disabled ? placeholder : null), /*#__PURE__*/_react.default.createElement("span", {
       className: "".concat(selectPrefixCls, "-suffix")
     }, renderSuffix())));
   };
-  var singleCls = (0, _classnames.default)(commCls, (_classNames5 = {}, (0, _defineProperty2.default)(_classNames5, "".concat(selectPrefixCls, "-disabled"), disabled), (0, _defineProperty2.default)(_classNames5, "".concat(selectPrefixCls, "-focused"), !disabled && focusd || optionShow), _classNames5));
+  var singleCls = (0, _classnames.default)(commCls, (_classNames6 = {}, (0, _defineProperty2.default)(_classNames6, "".concat(selectPrefixCls, "-disabled"), disabled), (0, _defineProperty2.default)(_classNames6, "".concat(selectPrefixCls, "-focused"), !disabled && focusd || optionShow), _classNames6));
   (0, _react.useEffect)(function () {
     if (optionShow && !disabled) {
       var onDropdownVisibleChange = selectProps.onDropdownVisibleChange;
@@ -389,16 +402,17 @@ var InternalSelect = function InternalSelect(props, ref) {
     }
     return -1;
   };
-  var _useState11 = (0, _react.useState)(getActiveIndex(0)),
-    _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
-    activeIndex = _useState12[0],
-    setActiveIndex = _useState12[1];
+  var _useState13 = (0, _react.useState)(-1),
+    _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
+    activeIndex = _useState14[0],
+    setActiveIndex = _useState14[1];
   var initActiveIndex = function initActiveIndex() {
-    setActiveIndex(getActiveIndex(0));
+    var index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : undefined;
+    setActiveIndex(index === undefined ? getActiveIndex(0) : index);
   };
   (0, _react.useEffect)(function () {
-    initActiveIndex();
-  }, [searchValue, tabsValue]);
+    initActiveIndex(searchValue ? undefined : -1);
+  }, [searchValue, tabsValue, curkeyboardList]);
   var onInternalKeyDown = function onInternalKeyDown(e) {
     var _a, _b, _c;
     var which = e.which;
@@ -422,11 +436,11 @@ var InternalSelect = function InternalSelect(props, ref) {
             var item = curkeyboardList[activeIndex];
             if (!item) return;
             handleOption(item);
-            setOptionShow(false);
+            handleVisibleChange(false);
             break;
           }
         case _KeyCode.default.ESC:
-          setOptionShow(false);
+          handleVisibleChange(false);
           break;
         default:
           break;
@@ -482,7 +496,7 @@ var InternalSelect = function InternalSelect(props, ref) {
   };
   var handleVisibleChange = function handleVisibleChange(visible) {
     if (!visible) {
-      initActiveIndex();
+      initActiveIndex(-1);
     }
     if (visible !== optionShow) {
       props.visible === undefined && setOptionShow(visible);

package/lib/city-picker/style/index.css

@@ -170,6 +170,7 @@
   background: #fff;
   -webkit-transition: opacity 0.15s ease;
   transition: opacity 0.15s ease;
+  font-size: var(--kd-c-city-picker-icon-clear-font-size, 16px);
 }
 .kd-city-picker-icon-clear:hover {
   color: var(--kd-c-city-picker-color-border-hover, var(--kd-g-color-theme, #5582f3));
@@ -239,10 +240,10 @@
   opacity: 1;
 }
 .kd-city-picker-wrapper .kd-city-picker-icon-clear {
-  color: var(--kd-c-city-picker-icon-clear-color-text, #d9d9d9);
+  color: var(--kd-c-city-picker-icon-clear-color-text, #666666);
 }
 .kd-city-picker-wrapper .kd-city-picker-icon-clear:hover {
-  color: var(--kd-c-city-picker-icon-clear-color-text-hover, #999);
+  color: var(--kd-c-city-picker-icon-clear-color-text-hover, var(--kd-g-color-theme, #5582f3));
 }
 .kd-city-picker-show-search {
   cursor: text;
@@ -419,7 +420,7 @@
 .kd-city-picker-focused {
   border-color: var(--kd-c-city-picker-color-border-foucs, var(--kd-g-color-theme, #5582f3)) !important;
 }
-.kd-city-picker-focused .kd-city-picker-content-item {
+.kd-city-picker-focused .kd-city-picker-content-item:not(.kd-city-picker-content-item-seleted) {
   color: var(--kd-c-city-picker-placeholder-color-text, #b2b2b2);
 }
 .kd-city-picker-disabled {

package/lib/city-picker/style/index.less

@@ -61,6 +61,7 @@
       top: 0;
       background: #fff;
       transition: opacity 0.15s ease;
+      font-size: @city-picker-clear-font-size;
       &:hover {
         color: @city-picker-g-color-border-hover;
       }
@@ -297,7 +298,7 @@
   &-focused {
     .focusColor();
 
-    .@{city-picker-prefix-cls}-content-item {
+    .@{city-picker-prefix-cls}-content-item:not(.@{city-picker-prefix-cls}-content-item-seleted) {
       color: @city-picker-placeholder-color;
     }
   }

package/lib/city-picker/style/token.less

@@ -17,8 +17,8 @@
 @city-picker-color-background-disabled: var(~'@{city-picker-custom-prefix}-color-background-disabled', #fff);
 @city-picker-color-text-disabled: var(~'@{city-picker-custom-prefix}-color-text-disabled', @color-disabled);
 @city-picker-arrow-icon-color-text-disabled: var(~'@{city-picker-custom-prefix}-arrow-icon-color-text-disabled', #b2b2b2);
-@city-picker-clear-color: var(~'@{city-picker-custom-prefix}-icon-clear-color-text', #d9d9d9);
-@city-picker-clear-color-hover: var(~'@{city-picker-custom-prefix}-icon-clear-color-text-hover', #999);
+@city-picker-clear-color: var(~'@{city-picker-custom-prefix}-icon-clear-color-text', #666666);
+@city-picker-clear-color-hover: var(~'@{city-picker-custom-prefix}-icon-clear-color-text-hover', @color-theme);
 @city-picker-list-item-color-selected: var(~'@{city-picker-custom-prefix}-list-item-color-text-selected', @color-theme);
 @city-picker-highlight-color: var(~'@{city-picker-custom-prefix}-highlight-color-text', @color-theme);
 
@@ -27,6 +27,7 @@
 @city-picker-large-font-size: var(~'@{city-picker-custom-prefix}-font-size-large', 16px); // 大号字体
 @city-picker-middle-font-size: var(~'@{city-picker-custom-prefix}-font-size-middle', 14px); // 中号高度
 @city-picker-small-font-size: var(~'@{city-picker-custom-prefix}-font-size-small', 12px); // 小号高度
+@city-picker-clear-font-size: var(~'@{city-picker-custom-prefix}-icon-clear-font-size', 16px);
 
 // line-height
 @city-picker-dropdown-line-height: var(~'@{city-picker-custom-prefix}-dropdown-line-height', 22px);