fix(components): [el-select] fix composition bug #3532 (#3533)

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)

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"

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') {