From 5e037ceaa6ee7bf46d728623366990770a7a1abd Mon Sep 17 00:00:00 2001
From: bchen1029 <39672197+bchen1029@users.noreply.github.com>
Date: Tue, 12 Oct 2021 11:28:51 +0800
Subject: [PATCH] Select: fix keydown event when composition (#21336)

---
 packages/input/src/input.vue   |  5 ++++-
 packages/select/src/select.vue | 16 ++++++++++++----
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/packages/input/src/input.vue b/packages/input/src/input.vue
index 1a66d6a9648..26321f1cf91 100644
--- 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
index 82d439a98e8..031337510b4 100644
--- 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') {