Input / Select: shouldn't fire input event during composition (#10517)

packages/input/src/input.vue

@@ -29,6 +29,9 @@
         :autocomplete="autoComplete"
         :value="currentValue"
         ref="input"
+        @compositionstart="handleComposition"
+        @compositionupdate="handleComposition"
+        @compositionend="handleComposition"
         @input="handleInput"
         @focus="handleFocus"
         @blur="handleBlur"
@@ -76,6 +79,9 @@
       :tabindex="tabindex"
       class="el-textarea__inner"
       :value="currentValue"
+      @compositionstart="handleComposition"
+      @compositionupdate="handleComposition"
+      @compositionend="handleComposition"
       @input="handleInput"
       ref="textarea"
       v-bind="$attrs"
@@ -120,7 +126,8 @@
         prefixOffset: null,
         suffixOffset: null,
         hovering: false,
-        focused: false
+        focused: false,
+        isOnComposition: false
       };
     },
 
@@ -243,7 +250,16 @@
         this.focused = true;
         this.$emit('focus', event);
       },
+      handleComposition(event) {
+        if (event.type === 'compositionend') {
+          this.isOnComposition = false;
+          this.handleInput(event);
+        } else {
+          this.isOnComposition = true;
+        }
+      },
       handleInput(event) {
+        if (this.isOnComposition) return;
         const value = event.target.value;
         this.$emit('input', value);
         this.setCurrentValue(value);

packages/select/src/select.vue

@@ -57,6 +57,9 @@
         @keydown.enter.prevent="selectOption"
         @keydown.esc.stop.prevent="visible = false"
         @keydown.delete="deletePrevTag"
+        @compositionstart="handleComposition"
+        @compositionupdate="handleComposition"
+        @compositionend="handleComposition"
         v-model="query"
         @input="e => handleQueryChange(e.target.value)"
         :debounce="remote ? 300 : 0"
@@ -304,7 +307,8 @@
         query: '',
         previousQuery: null,
         inputHovering: false,
-        currentPlaceholder: ''
+        currentPlaceholder: '',
+        isOnComposition: false
       };
     },
 
@@ -407,8 +411,16 @@
     },
 
     methods: {
+      handleComposition(event) {
+        if (event.type === 'compositionend') {
+          this.isOnComposition = false;
+          this.handleQueryChange(event.target.value);
+        } else {
+          this.isOnComposition = true;
+        }
+      },
       handleQueryChange(val) {
-        if (this.previousQuery === val) return;
+        if (this.previousQuery === val || this.isOnComposition) return;
         if (
           this.previousQuery === null &&
           (typeof this.filterMethod === 'function' || typeof this.remoteMethod === 'function')