bkui-vue 2.0.2-beta.30 → 2.0.2-beta.32

package/lib/dropdown/dropdown.d.ts

@@ -36,6 +36,7 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
     };
 }, {
+    isPopoverShow: import("vue").Ref<boolean>;
     afterShow: () => void;
     afterHidden: () => void;
     popoverRef: import("vue").Ref<any>;

package/lib/dropdown/index.d.ts

@@ -37,6 +37,7 @@ declare const BkDropdown: {
         onHide?: (...args: any[]) => any;
         onShowChange?: (...args: any[]) => any;
     }, {
+        isPopoverShow: import("vue").Ref<boolean>;
         afterShow: () => void;
         afterHidden: () => void;
         popoverRef: import("vue").Ref<any>;
@@ -128,6 +129,7 @@ declare const BkDropdown: {
         onHide?: (...args: any[]) => any;
         onShowChange?: (...args: any[]) => any;
     }, {
+        isPopoverShow: import("vue").Ref<boolean>;
         afterShow: () => void;
         afterHidden: () => void;
         popoverRef: import("vue").Ref<any>;
@@ -181,6 +183,7 @@ declare const BkDropdown: {
     onHide?: (...args: any[]) => any;
     onShowChange?: (...args: any[]) => any;
 }, {
+    isPopoverShow: import("vue").Ref<boolean>;
     afterShow: () => void;
     afterHidden: () => void;
     popoverRef: import("vue").Ref<any>;

package/lib/dropdown/index.js

@@ -90,7 +90,7 @@ function _defineProperty(obj, key, value) {
 ;// CONCATENATED MODULE: external "vue"
 var external_vue_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
 var external_vue_y = x => () => x
-const external_vue_namespaceObject = external_vue_x({ ["computed"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.computed, ["createTextVNode"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.createTextVNode, ["createVNode"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.createVNode, ["defineComponent"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.defineComponent, ["mergeProps"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.mergeProps, ["ref"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.ref });
+const external_vue_namespaceObject = external_vue_x({ ["computed"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.computed, ["createVNode"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.createVNode, ["defineComponent"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.defineComponent, ["mergeProps"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.mergeProps, ["ref"]: () => __WEBPACK_EXTERNAL_MODULE_vue__.ref });
 ;// CONCATENATED MODULE: external "../config-provider"
 var config_provider_x = y => { var x = {}; __webpack_require__.d(x, y); return x; }
 var config_provider_y = x => () => x
@@ -160,8 +160,13 @@ const merge_namespaceObject = merge_x({ ["default"]: () => __WEBPACK_EXTERNAL_MO
   emits: ['showChange', 'show', 'hide'],
   setup: function setup(_props, _ref) {
     var emit = _ref.emit;
+    var popoverRef = (0,external_vue_namespaceObject.ref)(null);
+    var isPopoverShow = (0,external_vue_namespaceObject.ref)(false);
+    var _usePrefix = (0,config_provider_namespaceObject.usePrefix)(),
+      resolveClassName = _usePrefix.resolveClassName;
     /** 弹层显示值变更 */
     var handleShowChagne = function handleShowChagne(val) {
+      isPopoverShow.value = val;
       emit('showChange', val);
     };
     /** 显示后回调 */
@@ -174,10 +179,8 @@ const merge_namespaceObject = merge_x({ ["default"]: () => __WEBPACK_EXTERNAL_MO
       emit('hide');
       handleShowChagne(false);
     };
-    var popoverRef = (0,external_vue_namespaceObject.ref)(null);
-    var _usePrefix = (0,config_provider_namespaceObject.usePrefix)(),
-      resolveClassName = _usePrefix.resolveClassName;
     return {
+      isPopoverShow: isPopoverShow,
       afterShow: afterShow,
       afterHidden: afterHidden,
       popoverRef: popoverRef,
@@ -209,13 +212,15 @@ const merge_namespaceObject = merge_x({ ["default"]: () => __WEBPACK_EXTERNAL_MO
         var _this$$slots$default, _this$$slots;
         return (0,external_vue_namespaceObject.createVNode)("div", {
           "class": ["".concat(_this.resolveClassName('dropdown-reference')), _this.disabled ? 'disabled' : '']
-        }, [' ', (_this$$slots$default = (_this$$slots = _this.$slots)["default"]) === null || _this$$slots$default === void 0 ? void 0 : _this$$slots$default.call(_this$$slots), ' ']);
+        }, [(_this$$slots$default = (_this$$slots = _this.$slots)["default"]) === null || _this$$slots$default === void 0 ? void 0 : _this$$slots$default.call(_this$$slots, {
+          popoverShow: _this.isPopoverShow
+        })]);
       },
       content: function content() {
         var _this$$slots$content, _this$$slots2;
         return (0,external_vue_namespaceObject.createVNode)("div", {
           "class": "".concat(_this.resolveClassName('dropdown-content'))
-        }, [(0,external_vue_namespaceObject.createTextVNode)(" "), (_this$$slots$content = (_this$$slots2 = _this.$slots).content) === null || _this$$slots$content === void 0 ? void 0 : _this$$slots$content.call(_this$$slots2), (0,external_vue_namespaceObject.createTextVNode)(" ")]);
+        }, [(_this$$slots$content = (_this$$slots2 = _this.$slots).content) === null || _this$$slots$content === void 0 ? void 0 : _this$$slots$content.call(_this$$slots2)]);
       }
     })]);
   }

package/lib/form/form-item.d.ts

@@ -1,5 +1,6 @@
 import type { ComputedRef, ExtractPropTypes } from 'vue';
 declare const formItemProps: {
+    itemType: import("vue-types").VueTypeDef<string>;
     label: import("vue-types").VueTypeValidableDef<string> & {
         default: string;
     };
@@ -46,6 +47,7 @@ declare const formItemProps: {
 };
 export type FormItemProps = Readonly<ExtractPropTypes<typeof formItemProps>>;
 declare const _default: import("vue").DefineComponent<{
+    itemType: import("vue-types").VueTypeDef<string>;
     label: import("vue-types").VueTypeValidableDef<string> & {
         default: string;
     };
@@ -106,6 +108,7 @@ declare const _default: import("vue").DefineComponent<{
     isError: import("vue").Ref<boolean>;
     errorMessage: import("vue").Ref<string>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
+    itemType: import("vue-types").VueTypeDef<string>;
     label: import("vue-types").VueTypeValidableDef<string> & {
         default: string;
     };

package/lib/form/form.css

@@ -19,12 +19,23 @@
   line-height: 20px;
   text-align: left;
 }
-.bk-form--vertical .bk-form-content {
-  text-align: left;
-}
 .bk-form-item {
   margin-bottom: 24px;
 }
+.bk-form-item--vertical .bk-form-label {
+  float: unset;
+  width: auto;
+  padding-right: 0;
+  margin-bottom: 6px;
+  line-height: 20px;
+  text-align: left;
+}
+.bk-form-item--default .bk-form-label {
+  float: left;
+  padding-right: 22px;
+  line-height: 32px;
+  text-align: right;
+}
 .bk-form-item.is-required .bk-form-label:after {
   position: absolute;
   top: 0;
@@ -51,6 +62,7 @@
 }
 .bk-form-label {
   position: relative;
+  box-sizing: border-box;
   float: left;
   padding-right: 22px;
   font-size: 14px;
@@ -59,7 +71,6 @@
   color: #63656e;
   text-align: right;
   vertical-align: middle;
-  box-sizing: border-box;
 }
 .bk-form-label-description {
   cursor: pointer;
@@ -71,6 +82,7 @@
 .bk-form-content {
   position: relative;
   line-height: 32px;
+  text-align: left;
 }
 .bk-form-error {
   position: absolute;

package/lib/form/form.less

@@ -26,16 +26,34 @@
       text-align: left;
 
     }
-
-    .@{bk-prefix}-form-content {
-      text-align: left;
-    }
   }
 }
 
 .@{bk-prefix}-form-item {
   margin-bottom: 24px;
 
+  &--vertical {
+
+    .@{bk-prefix}-form-label {
+      float: unset;
+      width: auto;
+      padding-right: 0;
+      margin-bottom: 6px;
+      line-height: 20px;
+      text-align: left;
+    }
+  }
+
+    &--default {
+
+    .@{bk-prefix}-form-label {
+      float: left;
+      padding-right: 22px;
+      line-height: 32px;
+      text-align: right;
+    }
+  }
+
   &.is-required {
     .@{bk-prefix}-form-label {
       &:after {
@@ -73,6 +91,7 @@
 
 .@{bk-prefix}-form-label {
   position: relative;
+  box-sizing: border-box;
   float: left;
   padding-right: 22px;
   font-size: 14px;
@@ -80,9 +99,7 @@
   line-height: 32px;
   color: #63656e;
   text-align: right;
-  text-align: right;
   vertical-align: middle;
-  box-sizing: border-box;
 }
 .@{bk-prefix}-form-label-description {
   cursor: pointer;
@@ -95,6 +112,7 @@
 .@{bk-prefix}-form-content {
   position: relative;
   line-height: 32px;
+  text-align: left;
 }
 
 .@{bk-prefix}-form-error {

package/lib/form/form.variable.css

@@ -149,12 +149,23 @@
   line-height: 20px;
   text-align: left;
 }
-.bk-form--vertical .bk-form-content {
-  text-align: left;
-}
 .bk-form-item {
   margin-bottom: 24px;
 }
+.bk-form-item--vertical .bk-form-label {
+  float: unset;
+  width: auto;
+  padding-right: 0;
+  margin-bottom: 6px;
+  line-height: 20px;
+  text-align: left;
+}
+.bk-form-item--default .bk-form-label {
+  float: left;
+  padding-right: 22px;
+  line-height: 32px;
+  text-align: right;
+}
 .bk-form-item.is-required .bk-form-label:after {
   position: absolute;
   top: 0;
@@ -181,6 +192,7 @@
 }
 .bk-form-label {
   position: relative;
+  box-sizing: border-box;
   float: left;
   padding-right: 22px;
   font-size: 14px;
@@ -189,7 +201,6 @@
   color: #63656e;
   text-align: right;
   vertical-align: middle;
-  box-sizing: border-box;
 }
 .bk-form-label-description {
   cursor: pointer;
@@ -201,6 +212,7 @@
 .bk-form-content {
   position: relative;
   line-height: 32px;
+  text-align: left;
 }
 .bk-form-error {
   position: absolute;

package/lib/form/index.d.ts

@@ -174,6 +174,7 @@ declare const BkForm: {
     };
 }, {}, string, {}> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & import("vue").Plugin<any[]> & Readonly<{
     FormItem: import("vue").DefineComponent<{
+        itemType: import("vue-types").VueTypeDef<string>;
         label: import("vue-types").VueTypeValidableDef<string> & {
             default: string;
         };
@@ -234,6 +235,7 @@ declare const BkForm: {
         isError: import("vue").Ref<boolean>;
         errorMessage: import("vue").Ref<string>;
     }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+        itemType: import("vue-types").VueTypeDef<string>;
         label: import("vue-types").VueTypeValidableDef<string> & {
             default: string;
         };

package/lib/form/index.js

@@ -1972,6 +1972,7 @@ function form_item_objectSpread(e) { for (var r = 1; r < arguments.length; r++)
 
 
 var formItemProps = {
+  itemType: shared_.PropTypes.oneOf(['default', 'vertical']),
   label: shared_.PropTypes.string,
   labelWidth: shared_.PropTypes.oneOfType([Number, String]),
   labelPosition: shared_.PropTypes.oneOf(['left', 'center', 'right']),
@@ -2127,7 +2128,7 @@ var isValid = function isValid(value) {
       if (!isForm) {
         return false;
       }
-      return form.props.formType === 'vertical';
+      return form.props.formType === 'vertical' || props.itemType === 'vertical';
     });
     var isShowLabel = (0,external_vue_.computed)(function () {
       if (props.label || context.slots.label) {
@@ -2217,19 +2218,18 @@ var isValid = function isValid(value) {
                   state.errorMessage = errorMessage;
                 }
                 form.emit('validate', props.property, false, errorMessage);
-                return Promise.reject(state.errorMessage);
               });
             }
             // 同步验证失败
-            if (result === false) {
-              var errorMessage = getRuleMessage(rule);
+            if (result !== true) {
+              var errorMessage = typeof result === 'string' ? result : getRuleMessage(rule);
               if (showError) {
                 state.isError = true;
                 // 验证结果返回的是 String 表示验证失败，返回结果作为错误信息
-                state.errorMessage = typeof result === 'string' ? result : errorMessage;
+                state.errorMessage = errorMessage;
               }
               form.emit('validate', props.property, false, errorMessage);
-              return Promise.reject(state.errorMessage);
+              return Promise.reject(errorMessage);
             }
             // 下一步
             return doValidate();
@@ -2277,7 +2277,7 @@ var isValid = function isValid(value) {
       _this$$slots,
       _this$$slots$default,
       _this$$slots2;
-    var itemClassees = (0,shared_.classes)((0,defineProperty["default"])((0,defineProperty["default"])((0,defineProperty["default"])({}, "".concat(this.resolveClassName('form-item')), true), 'is-error', this.isError), 'is-required', this.required));
+    var itemClassees = (0,shared_.classes)((0,defineProperty["default"])((0,defineProperty["default"])((0,defineProperty["default"])((0,defineProperty["default"])({}, "".concat(this.resolveClassName('form-item')), true), "".concat(this.resolveClassName("form-item--".concat(this.itemType))), Boolean(this.itemType)), 'is-error', this.isError), 'is-required', this.required));
     var renderLabel = function renderLabel() {
       if (_this.$slots.label) {
         return (0,external_vue_.createVNode)("span", null, [_this.$slots.label()]);

package/lib/index.js

@@ -3,5 +3,5 @@ export * from './hooks';
 export { default } from './preset';
 export * from './config-provider';
 export * from './directives';
-export const version = "2.0.2-beta.30";
+export const version = "2.0.2-beta.32";
 window.__bkui_vue_version__ = version;

package/lib/search-select/index.d.ts

@@ -90,6 +90,7 @@ declare const BkSearchSelect: {
             menuList: import("vue").Ref<import("./utils").ISearchItem[]>;
             menuHoverId: import("vue").Ref<string>;
             isFocus: import("vue").Ref<boolean>;
+            isComposition: import("vue").Ref<boolean>;
             usingItem: import("vue").Ref<import("./utils").SelectedItem>;
             showPopover: import("vue").Ref<boolean>;
             showNoSelectValueError: import("vue").Ref<boolean>;
@@ -125,6 +126,8 @@ declare const BkSearchSelect: {
                 logical: string;
             }>;
             inputKey: import("vue").Ref<string>;
+            handleCompositionEnd: (event: CompositionEvent) => void;
+            handleCompositionStart: () => void;
         }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("focus" | "delete" | "add" | "selectKey")[], import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & Readonly<import("vue").ExtractPropTypes<{
             data: {
                 type: import("vue").PropType<import("./utils").ISearchItem[]>;
@@ -223,6 +226,7 @@ declare const BkSearchSelect: {
             menuList: import("vue").Ref<import("./utils").ISearchItem[]>;
             menuHoverId: import("vue").Ref<string>;
             isFocus: import("vue").Ref<boolean>;
+            isComposition: import("vue").Ref<boolean>;
             usingItem: import("vue").Ref<import("./utils").SelectedItem>;
             showPopover: import("vue").Ref<boolean>;
             showNoSelectValueError: import("vue").Ref<boolean>;
@@ -258,6 +262,8 @@ declare const BkSearchSelect: {
                 logical: string;
             }>;
             inputKey: import("vue").Ref<string>;
+            handleCompositionEnd: (event: CompositionEvent) => void;
+            handleCompositionStart: () => void;
         }, {}, {}, {}, {
             maxHeight: number;
             mode: import("./utils").SearchInputMode;
@@ -546,6 +552,7 @@ declare const BkSearchSelect: {
             menuList: import("vue").Ref<import("./utils").ISearchItem[]>;
             menuHoverId: import("vue").Ref<string>;
             isFocus: import("vue").Ref<boolean>;
+            isComposition: import("vue").Ref<boolean>;
             usingItem: import("vue").Ref<import("./utils").SelectedItem>;
             showPopover: import("vue").Ref<boolean>;
             showNoSelectValueError: import("vue").Ref<boolean>;
@@ -581,6 +588,8 @@ declare const BkSearchSelect: {
                 logical: string;
             }>;
             inputKey: import("vue").Ref<string>;
+            handleCompositionEnd: (event: CompositionEvent) => void;
+            handleCompositionStart: () => void;
         }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("focus" | "delete" | "add" | "selectKey")[], import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & Readonly<import("vue").ExtractPropTypes<{
             data: {
                 type: import("vue").PropType<import("./utils").ISearchItem[]>;
@@ -679,6 +688,7 @@ declare const BkSearchSelect: {
             menuList: import("vue").Ref<import("./utils").ISearchItem[]>;
             menuHoverId: import("vue").Ref<string>;
             isFocus: import("vue").Ref<boolean>;
+            isComposition: import("vue").Ref<boolean>;
             usingItem: import("vue").Ref<import("./utils").SelectedItem>;
             showPopover: import("vue").Ref<boolean>;
             showNoSelectValueError: import("vue").Ref<boolean>;
@@ -714,6 +724,8 @@ declare const BkSearchSelect: {
                 logical: string;
             }>;
             inputKey: import("vue").Ref<string>;
+            handleCompositionEnd: (event: CompositionEvent) => void;
+            handleCompositionStart: () => void;
         }, {}, {}, {}, {
             maxHeight: number;
             mode: import("./utils").SearchInputMode;
@@ -951,6 +963,7 @@ declare const BkSearchSelect: {
         menuList: import("vue").Ref<import("./utils").ISearchItem[]>;
         menuHoverId: import("vue").Ref<string>;
         isFocus: import("vue").Ref<boolean>;
+        isComposition: import("vue").Ref<boolean>;
         usingItem: import("vue").Ref<import("./utils").SelectedItem>;
         showPopover: import("vue").Ref<boolean>;
         showNoSelectValueError: import("vue").Ref<boolean>;
@@ -986,6 +999,8 @@ declare const BkSearchSelect: {
             logical: string;
         }>;
         inputKey: import("vue").Ref<string>;
+        handleCompositionEnd: (event: CompositionEvent) => void;
+        handleCompositionStart: () => void;
     }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("focus" | "delete" | "add" | "selectKey")[], import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & Readonly<import("vue").ExtractPropTypes<{
         data: {
             type: import("vue").PropType<import("./utils").ISearchItem[]>;
@@ -1084,6 +1099,7 @@ declare const BkSearchSelect: {
         menuList: import("vue").Ref<import("./utils").ISearchItem[]>;
         menuHoverId: import("vue").Ref<string>;
         isFocus: import("vue").Ref<boolean>;
+        isComposition: import("vue").Ref<boolean>;
         usingItem: import("vue").Ref<import("./utils").SelectedItem>;
         showPopover: import("vue").Ref<boolean>;
         showNoSelectValueError: import("vue").Ref<boolean>;
@@ -1119,6 +1135,8 @@ declare const BkSearchSelect: {
             logical: string;
         }>;
         inputKey: import("vue").Ref<string>;
+        handleCompositionEnd: (event: CompositionEvent) => void;
+        handleCompositionStart: () => void;
     }, {}, {}, {}, {
         maxHeight: number;
         mode: import("./utils").SearchInputMode;

package/lib/search-select/index.js

@@ -2807,6 +2807,7 @@ function input_objectSpread(e) { for (var r = 1; r < arguments.length; r++) { va
       return ((_usingItem$value = usingItem.value) === null || _usingItem$value === void 0 ? void 0 : _usingItem$value.logical) || SearchLogical.OR;
     });
     var inputKey = (0,external_vue_namespaceObject.ref)((0,shared_namespaceObject.random)(10));
+    var isComposition = (0,external_vue_namespaceObject.ref)(false);
     (0,external_vue_namespaceObject.watch)(editKey, function () {
       if (props.mode === SearchInputMode.DEFAULT && editKey.value) {
         showPopover.value = false;
@@ -2956,7 +2957,9 @@ function input_objectSpread(e) { for (var r = 1; r < arguments.length; r++) { va
       debounceSetMenuList();
     }
     function handleInputChange(event) {
-      var text = event.target.innerText.trim();
+      if (isComposition.value) return;
+      clearInputBr();
+      var text = event.target.innerText;
       if (!usingItem.value) {
         keyword.value = text;
         debounceSetMenuList();
@@ -2975,7 +2978,7 @@ function input_objectSpread(e) { for (var r = 1; r < arguments.length; r++) { va
           return;
         }
       }
-      keyword.value = usingItem.value.isSpecialType() ? text : text.replace(usingItem.value.name, '').replace(':', '').trim();
+      keyword.value = usingItem.value.isSpecialType() ? text : text.replace(usingItem.value.name, '').replace(':', '');
       debounceSetMenuList();
     }
     function handleInputKeyup(event) {
@@ -2988,9 +2991,11 @@ function input_objectSpread(e) { for (var r = 1; r < arguments.length; r++) { va
       //   }
       //   return;
       // }
+      if (isComposition.value) return;
       switch (event.code) {
         case 'Enter':
         case 'NumpadEnter':
+          event.preventDefault();
           if (props.valueBehavior === ValueBehavior.NEED_KEY && menuList.value.some(function (item) {
             return item.id === menuHoverId.value;
           })) {
@@ -3005,7 +3010,9 @@ function input_objectSpread(e) { for (var r = 1; r < arguments.length; r++) { va
           });
           break;
         case 'Backspace':
+        case 'Delete':
           handleKeyBackspace(event);
+          break;
         default:
           showNoSelectValueError.value = false;
           break;
@@ -3111,7 +3118,7 @@ function input_objectSpread(e) { for (var r = 1; r < arguments.length; r++) { va
           setInputFocus(false, false);
           return;
         }
-      } else if (!keyword.value) {
+      } else if (!keyword.value || keyword.value.length === 1) {
         usingItem.value = null;
         keyword.value = '';
         setMenuList();
@@ -3560,12 +3567,30 @@ function input_objectSpread(e) { for (var r = 1; r < arguments.length; r++) { va
         (0,external_vue_namespaceObject.nextTick)(clearInput);
       }
     }
+    function clearInputBr() {
+      if (!inputRef.value) return;
+      var brs = inputRef.value.querySelectorAll('br');
+      brs === null || brs === void 0 || brs.forEach(function (br) {
+        return br.remove();
+      });
+    }
     function clearInput() {
       if (!inputRef.value) return;
-      setTimeout(function () {
-        keyword.value = '';
+      // magic code 判断是否是 windows 系统
+      // const isWindows = navigator.userAgent.includes('Windows');
+      // if (isWindows) {
+      //   setTimeout(() => {
+      //     keyword.value = '';
+      //     inputRef.value.innerText = '';
+      //     clearInputBr();
+      //   }, 32);
+      //   return;
+      // }
+      keyword.value = '';
+      (0,external_vue_namespaceObject.nextTick)(function () {
         inputRef.value.innerText = '';
-      }, 16);
+        clearInputBr();
+      });
     }
     function str2SelectedItem(str) {
       var _str$split = str.split(':'),
@@ -3645,6 +3670,14 @@ function input_objectSpread(e) { for (var r = 1; r < arguments.length; r++) { va
         menuHoverId.value = '';
       }
     }
+    function handleCompositionEnd(event) {
+      isComposition.value = false;
+      keyword.value = event.data;
+      handleInputChange(event);
+    }
+    function handleCompositionStart() {
+      isComposition.value = true;
+    }
     // expose
     expose({
       inputFocusForWrapper: inputFocusForWrapper,
@@ -3663,6 +3696,7 @@ function input_objectSpread(e) { for (var r = 1; r < arguments.length; r++) { va
       menuList: menuList,
       menuHoverId: menuHoverId,
       isFocus: isFocus,
+      isComposition: isComposition,
       usingItem: usingItem,
       showPopover: showPopover,
       showNoSelectValueError: showNoSelectValueError,
@@ -3685,7 +3719,9 @@ function input_objectSpread(e) { for (var r = 1; r < arguments.length; r++) { va
       customPanelSubmit: customPanelSubmit,
       refleshMenuHover: refleshMenuHover,
       t: t,
-      inputKey: inputKey
+      inputKey: inputKey,
+      handleCompositionEnd: handleCompositionEnd,
+      handleCompositionStart: handleCompositionStart
     };
   },
   render: function render() {
@@ -3712,9 +3748,11 @@ function input_objectSpread(e) { for (var r = 1; r < arguments.length; r++) { va
           'input-after': showInputAfter
         },
         "contenteditable": true,
-        "data-placeholder": !inputInnerHtml && !_this.keyword ? _this.placeholder : '',
+        "data-placeholder": !_this.isComposition && !inputInnerHtml && !_this.keyword ? _this.placeholder : '',
         "data-tips": placeholder || '',
         "spellcheck": "false",
+        "onCompositionend": _this.handleCompositionEnd,
+        "onCompositionstart": _this.handleCompositionStart,
         "onFocus": _this.handleInputFocus,
         "onInput": _this.handleInputChange,
         "onKeydown": _this.handleInputKeyup,

package/lib/search-select/input.d.ts

@@ -49,6 +49,7 @@ declare const _default: import("vue").DefineComponent<{
     menuList: Ref<ISearchItem[]>;
     menuHoverId: Ref<string>;
     isFocus: Ref<boolean>;
+    isComposition: Ref<boolean>;
     usingItem: Ref<SelectedItem>;
     showPopover: Ref<boolean>;
     showNoSelectValueError: Ref<boolean>;
@@ -84,6 +85,8 @@ declare const _default: import("vue").DefineComponent<{
         logical: string;
     }>;
     inputKey: Ref<string>;
+    handleCompositionEnd: (event: CompositionEvent) => void;
+    handleCompositionStart: () => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("focus" | "delete" | "add" | "selectKey")[], "focus" | "delete" | "add" | "selectKey", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     data: {
         type: PropType<ISearchItem[]>;

package/lib/search-select/search-select.d.ts

@@ -122,6 +122,7 @@ declare const _default: import("vue").DefineComponent<{
         menuList: import("vue").Ref<ISearchItem[]>;
         menuHoverId: import("vue").Ref<string>;
         isFocus: import("vue").Ref<boolean>;
+        isComposition: import("vue").Ref<boolean>;
         usingItem: import("vue").Ref<SelectedItem>;
         showPopover: import("vue").Ref<boolean>;
         showNoSelectValueError: import("vue").Ref<boolean>;
@@ -157,6 +158,8 @@ declare const _default: import("vue").DefineComponent<{
             logical: string;
         }>;
         inputKey: import("vue").Ref<string>;
+        handleCompositionEnd: (event: CompositionEvent) => void;
+        handleCompositionStart: () => void;
     }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("focus" | "delete" | "add" | "selectKey")[], import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & Readonly<import("vue").ExtractPropTypes<{
         data: {
             type: PropType<ISearchItem[]>;
@@ -255,6 +258,7 @@ declare const _default: import("vue").DefineComponent<{
         menuList: import("vue").Ref<ISearchItem[]>;
         menuHoverId: import("vue").Ref<string>;
         isFocus: import("vue").Ref<boolean>;
+        isComposition: import("vue").Ref<boolean>;
         usingItem: import("vue").Ref<SelectedItem>;
         showPopover: import("vue").Ref<boolean>;
         showNoSelectValueError: import("vue").Ref<boolean>;
@@ -290,6 +294,8 @@ declare const _default: import("vue").DefineComponent<{
             logical: string;
         }>;
         inputKey: import("vue").Ref<string>;
+        handleCompositionEnd: (event: CompositionEvent) => void;
+        handleCompositionStart: () => void;
     }, {}, {}, {}, {
         maxHeight: number;
         mode: import("./utils").SearchInputMode;