Input: Fix Korean composition

Author: moonhyuk

packages/input/src/input.vue

@@ -29,8 +29,9 @@
         :readonly="readonly"
         :autocomplete="autoComplete || autocomplete"
         ref="input"
-        @compositionstart="handleCompositionStart"
-        @compositionend="handleCompositionEnd"
+        @compositionstart="handleComposition"
+        @compositionupdate="handleComposition"
+        @compositionend="handleComposition"
         @input="handleInput"
         @focus="handleFocus"
         @blur="handleBlur"
@@ -80,8 +81,9 @@
       v-else
       :tabindex="tabindex"
       class="el-textarea__inner"
-      @compositionstart="handleCompositionStart"
-      @compositionend="handleCompositionEnd"
+      @compositionstart="handleComposition"
+      @compositionupdate="handleComposition"
+      @compositionend="handleComposition"
       @input="handleInput"
       ref="textarea"
       v-bind="$attrs"
@@ -102,6 +104,7 @@
   import Migrating from 'element-ui/src/mixins/migrating';
   import calcTextareaHeight from './calcTextareaHeight';
   import merge from 'element-ui/src/utils/merge';
+  import {isKorean} from 'element-ui/src/utils/shared';
 
   export default {
     name: 'ElInput',
@@ -299,12 +302,15 @@
         this.focused = true;
         this.$emit('focus', event);
       },
-      handleCompositionStart() {
-        this.isComposing = true;
-      },
-      handleCompositionEnd(event) {
-        this.isComposing = false;
-        this.handleInput(event);
+      handleComposition(event) {
+        const text = event.target.value;
+        if (event.type === 'compositionend' && this.isComposing) {
+          this.isComposing = false;
+          this.handleInput(event);
+        } else {
+          const lastCharacter = text[text.length - 1] || '';
+          this.isComposing = !isKorean(lastCharacter);
+        }
       },
       handleInput(event) {
         // should not emit input during composition

packages/select/src/select.vue

@@ -435,7 +435,7 @@
     methods: {
       handleComposition(event) {
         const text = event.target.value;
-        if (event.type === 'compositionend') {
+        if (event.type === 'compositionend' && this.isOnComposition) {
           this.isOnComposition = false;
           this.handleQueryChange(text);
         } else {