瀏覽代碼

fix: [Taginput] Fixed an issue in FireFox where Chinese input could not complete character-to-Chinese conversion (#1811)

YyumeiZhang 2 年之前
父節點
當前提交
375059cd41
共有 1 個文件被更改,包括 26 次插入17 次删除
  1. 26 17
      packages/semi-foundation/tagInput/foundation.ts

+ 26 - 17
packages/semi-foundation/tagInput/foundation.ts

@@ -66,36 +66,45 @@ class TagInputFoundation extends BaseFoundation<TagInputAdapter> {
     };
 
     handleInputCompositionStart = (e: any) => {
+        const { maxLength } = this.getProps();
+        if (!isNumber(maxLength)) {
+            return;
+        }
         this._adapter.setEntering(true);
     }
 
     handleInputCompositionEnd = (e: any) => {
-        this._adapter.setEntering(false);
         const { value } = e.target;
         const {
             maxLength, 
             onInputExceed,
             separator
         } = this.getProps();
+        if (!isNumber(maxLength)) {
+            return;
+        }
+        this._adapter.setEntering(false);
         let allowChange = true;
-        const { inputValue } = this.getStates();
-        if (isNumber(maxLength)) {
-            const inputArr = getSplitedArray(inputValue, separator);
-            let index = 0;
-            for (; index < inputArr.length; index++) {
-                if (inputArr[index].length > maxLength) {
-                    allowChange = false;
-                    isFunction(onInputExceed) && onInputExceed(value);
-                    break;
-                }
+        const inputArr = getSplitedArray(value, separator);
+        let index = 0;
+        for (; index < inputArr.length; index++) {
+            if (inputArr[index].length > maxLength) {
+                allowChange = false;
+                isFunction(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));
+        }
+        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));
+        } else {
+            // Why does it need to be updated here instead of in onChange when the value meets the maxLength limit?
+            // Because in firefox, the state change in InputCompositionEnd causes onChange to not be triggered after 
+            // the composition input completes input.
+            this._adapter.setInputValue(value);
         }
     }