Select: fix keydown event when composition (#21336)

ElemeFE · Oct 12, 2021 · 5e037ce · 5e037ce
1 parent 6ae261d
commit 5e037ce
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 5 deletions.
diff --git a/packages/input/src/input.vue b/packages/input/src/input.vue
@@ -337,15 +337,18 @@
         this.focused = true;
         this.$emit('focus', event);
       },
-      handleCompositionStart() {
+      handleCompositionStart(event) {
+        this.$emit('compositionstart', event);
         this.isComposing = true;
       },
       handleCompositionUpdate(event) {
+        this.$emit('compositionupdate', event);
         const text = event.target.value;
         const lastCharacter = text[text.length - 1] || '';
         this.isComposing = !isKorean(lastCharacter);
       },
       handleCompositionEnd(event) {
+        this.$emit('compositionend', event);
         if (this.isComposing) {
           this.isComposing = false;
           this.handleInput(event);

diff --git a/packages/select/src/select.vue b/packages/select/src/select.vue
@@ -52,8 +52,8 @@
         @blur="softFocus = false"
         @keyup="managePlaceholder"
         @keydown="resetInputState"
-        @keydown.down.prevent="navigateOptions('next')"
-        @keydown.up.prevent="navigateOptions('prev')"
+        @keydown.down.prevent="handleNavigate('next')"
+        @keydown.up.prevent="handleNavigate('prev')"
         @keydown.enter.prevent="selectOption"
         @keydown.esc.stop.prevent="visible = false"
         @keydown.delete="deletePrevTag"
@@ -84,11 +84,14 @@
       @focus="handleFocus"
       @blur="handleBlur"
       @input="debouncedOnInputChange"
-      @keydown.native.down.stop.prevent="navigateOptions('next')"
-      @keydown.native.up.stop.prevent="navigateOptions('prev')"
+      @keydown.native.down.stop.prevent="handleNavigate('next')"
+      @keydown.native.up.stop.prevent="handleNavigate('prev')"
       @keydown.native.enter.prevent="selectOption"
       @keydown.native.esc.stop.prevent="visible = false"
       @keydown.native.tab="visible = false"
+      @compositionstart="handleComposition"
+      @compositionupdate="handleComposition"
+      @compositionend="handleComposition"
       @mouseenter.native="inputHovering = true"
       @mouseleave.native="inputHovering = false">
       <template slot="prefix" v-if="$slots.prefix">
@@ -440,6 +443,11 @@
     },
 
     methods: {
+      handleNavigate(direction) {
+        if (this.isOnComposition) return;
+
+        this.navigateOptions(direction);
+      },
       handleComposition(event) {
         const text = event.target.value;
         if (event.type === 'compositionend') {