From 165ae1000b2fc1721c0cf5bcb7bb20499d2d5ca2 Mon Sep 17 00:00:00 2001
From: bchen1029 <39672197+bchen1029@users.noreply.github.com>
Date: Wed, 22 Sep 2021 21:45:22 +0800
Subject: [PATCH] fix(components): [el-select] fix composition bug #3532
 (#3533)

---
 packages/components/input/src/index.vue     | 14 ++++++++++----
 packages/components/select/src/select.vue   |  3 +++
 packages/components/select/src/useSelect.ts |  1 +
 3 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/packages/components/input/src/index.vue b/packages/components/input/src/index.vue
index f051b96ae6..25ef7a8310 100644
--- a/packages/components/input/src/index.vue
+++ b/packages/components/input/src/index.vue
@@ -252,6 +252,9 @@ export default defineComponent({
     'mouseleave',
     'mouseenter',
     'keydown',
+    'compositionstart',
+    'compositionupdate',
+    'compositionend',
   ],
 
   setup(props, ctx) {
@@ -434,17 +437,20 @@ export default defineComponent({
       inputOrTextarea.value.select()
     }
 
-    const handleCompositionStart = () => {
+    const handleCompositionStart = (event: CompositionEvent) => {
+      ctx.emit('compositionstart', event)
       isComposing.value = true
     }
 
-    const handleCompositionUpdate = (event) => {
-      const text = event.target.value
+    const handleCompositionUpdate = (event: CompositionEvent) => {
+      ctx.emit('compositionupdate', event)
+      const text = (event.target as HTMLInputElement)?.value
       const lastCharacter = text[text.length - 1] || ''
       isComposing.value = !isKorean(lastCharacter)
     }
 
-    const handleCompositionEnd = (event) => {
+    const handleCompositionEnd = (event: CompositionEvent) => {
+      ctx.emit('compositionend', event)
       if (isComposing.value) {
         isComposing.value = false
         handleInput(event)
diff --git a/packages/components/select/src/select.vue b/packages/components/select/src/select.vue
index e095c8e882..223e740ca5 100644
--- a/packages/components/select/src/select.vue
+++ b/packages/components/select/src/select.vue
@@ -136,6 +136,9 @@
             @blur="handleBlur"
             @input="debouncedOnInputChange"
             @paste="debouncedOnInputChange"
+            @compositionstart="handleComposition"
+            @compositionupdate="handleComposition"
+            @compositionend="handleComposition"
             @keydown.down.stop.prevent="navigateOptions('next')"
             @keydown.up.stop.prevent="navigateOptions('prev')"
             @keydown.enter.stop.prevent="selectOption"
diff --git a/packages/components/select/src/useSelect.ts b/packages/components/select/src/useSelect.ts
index 1df1daeb58..b7e4544dd4 100644
--- a/packages/components/select/src/useSelect.ts
+++ b/packages/components/select/src/useSelect.ts
@@ -784,6 +784,7 @@ export const useSelect = (props, states: States, ctx) => {
       return
     }
     if (states.options.size === 0 || states.filteredOptionsCount === 0) return
+    if (states.isOnComposition) return
 
     if (!optionsAllDisabled.value) {
       if (direction === 'next') {