Input: cursor goes to the end when typing Chinese quickly (#11235)

autocomplete: remove composition event listeners because input has already handle it.

packages/autocomplete/src/autocomplete.vue

@@ -10,9 +10,6 @@
     <el-input
       ref="input"
       v-bind="$props"
-      @compositionstart.native="handleComposition"
-      @compositionupdate.native="handleComposition"
-      @compositionend.native="handleComposition"
       @input="handleChange"
       @focus="handleFocus"
       @blur="handleBlur"
@@ -122,7 +119,6 @@
     data() {
       return {
         activated: false,
-        isOnComposition: false,
         suggestions: [],
         loading: false,
         highlightedIndex: -1
@@ -163,17 +159,9 @@
           }
         });
       },
-      handleComposition(event) {
-        if (event.type === 'compositionend') {
-          this.isOnComposition = false;
-          this.handleChange(event.target.value);
-        } else {
-          this.isOnComposition = true;
-        }
-      },
       handleChange(value) {
         this.$emit('input', value);
-        if (this.isOnComposition || (!this.triggerOnFocus && !value)) {
+        if (!this.triggerOnFocus && !value) {
           this.suggestions = [];
           return;
         }

packages/input/src/input.vue

@@ -130,7 +130,8 @@
         suffixOffset: null,
         hovering: false,
         focused: false,
-        isOnComposition: false
+        isOnComposition: false,
+        valueBeforeComposition: null
       };
     },
 
@@ -260,28 +261,34 @@
       handleComposition(event) {
         if (event.type === 'compositionend') {
           this.isOnComposition = false;
+          this.currentValue = this.valueBeforeComposition;
+          this.valueBeforeComposition = null;
           this.handleInput(event);
         } else {
           const text = event.target.value;
           const lastCharacter = text[text.length - 1] || '';
           this.isOnComposition = !isKorean(lastCharacter);
+          if (this.isOnComposition && event.type === 'compositionstart') {
+            this.valueBeforeComposition = text;
+          }
         }
       },
       handleInput(event) {
-        if (this.isOnComposition) return;
         const value = event.target.value;
-        this.$emit('input', value);
         this.setCurrentValue(value);
+        if (this.isOnComposition) return;
+        this.$emit('input', value);
       },
       handleChange(event) {
         this.$emit('change', event.target.value);
       },
       setCurrentValue(value) {
-        if (value === this.currentValue) return;
+        if (this.isOnComposition && value === this.valueBeforeComposition) return;
+        this.currentValue = value;
+        if (this.isOnComposition) return;
         this.$nextTick(_ => {
           this.resizeTextarea();
         });
-        this.currentValue = value;
         if (this.validateEvent) {
           this.dispatch('ElFormItem', 'el.form.change', [value]);
         }