@douyinfe/semi-ui 2.26.0-beta.0 → 2.26.0

package/dist/umd/semi-ui.js

@@ -41422,7 +41422,66 @@ class foundation_TagInputFoundation extends foundation {
       const {
         value
       } = e.target;
-      this._checkInputChangeValid(value) && this._onInputChange(value, e);
+      const {
+        entering
+      } = this.getStates();
+
+      if (entering) {
+        // 如果处于输入法输入中，则先不检查输入是否有效，直接更新到inputValue，
+        // 因为对于输入法输入中而言，此时更新到 inputValue 的不是最后的结果，比如对于中文，此时 inputValue 中的内容是拼音
+        // 当输入法输入结束后，将在 handleInputCompositionEnd 中判断输入是否有效，处理结果
+        // If it is composition session, it does not check whether the input is valid, and directly updates to inputValue,
+        // Because for composition input, what is updated to inputValue at this time is not the final result.
+        // For example, for Chinese, the content in inputValue is pinyin at this time
+        // When the composition input is finished, it will be judged whether the input is valid in handleInputCompositionEnd and the result will be processed
+        this._onInputChange(value, e);
+      } else {
+        this._checkInputChangeValid(value) && this._onInputChange(value, e);
+      }
+    };
+
+    this.handleInputCompositionStart = e => {
+      this._adapter.setEntering(true);
+    };
+
+    this.handleInputCompositionEnd = e => {
+      this._adapter.setEntering(false);
+
+      const {
+        value
+      } = e.target;
+      const {
+        maxLength,
+        onInputExceed,
+        separator
+      } = this.getProps();
+      let allowChange = true;
+      const {
+        inputValue
+      } = this.getStates();
+
+      if (isNumber_default()(maxLength)) {
+        const inputArr = utils_getSplitedArray(inputValue, separator);
+        let index = 0;
+
+        for (; index < inputArr.length; index++) {
+          if (inputArr[index].length > maxLength) {
+            allowChange = false;
+            isFunction_default()(onInputExceed) && onInputExceed(value);
+            break;
+          }
+        }
+
+        if (!allowChange) {
+          const newInputArr = inputArr.slice(0, index);
+
+          if (index < inputArr.length) {
+            newInputArr.push(inputArr[index].slice(0, maxLength));
+          }
+
+          this._adapter.setInputValue(newInputArr.join(separator));
+        }
+      }
     };
     /**
      * check whether the input change is legal
@@ -43713,13 +43772,22 @@ class tagInput_TagInput extends baseComponent_BaseComponent {
       this.foundation.handleSortEnd(callbackProps);
     };
 
+    this.handleInputCompositionStart = e => {
+      this.foundation.handleInputCompositionStart(e);
+    };
+
+    this.handleInputCompositionEnd = e => {
+      this.foundation.handleInputCompositionEnd(e);
+    };
+
     this.foundation = new tagInput_foundation(this.adapter);
     this.state = {
       tagsArray: props.defaultValue || [],
       inputValue: '',
       focusing: false,
       hovering: false,
-      active: false
+      active: false,
+      entering: false
     };
     this.inputRef = /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createRef();
     this.tagInputRef = /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default.a.createRef();
@@ -43795,6 +43863,11 @@ class tagInput_TagInput extends baseComponent_BaseComponent {
           active
         });
       },
+      setEntering: entering => {
+        this.setState({
+          entering
+        });
+      },
       getClickOutsideHandler: () => {
         return this.clickOutsideHandler;
       },
@@ -44084,7 +44157,9 @@ class tagInput_TagInput extends baseComponent_BaseComponent {
         },
         onFocus: e => {
           this.handleInputFocus(e);
-        }
+        },
+        onCompositionStart: this.handleInputCompositionStart,
+        onCompositionEnd: this.handleInputCompositionEnd
       })), this.renderClearBtn(), this.renderSuffix())
     );
   }