Prevent enter event while composing

[d-sawada]

Hello.

Description

Thank you for creating great components!
Now I was using v-select with multiple = true and taggable = false.
Entered Japanese to search for option and pressed Enter for conversion to kanji.
Then the enter event will be fired and option will be selected!
I want this problem to be solved.

Solution

Control enter events using two javascript events, compositionstart and compositionend.
Probably will be:

--- a/src/components/Select.vue
+++ b/src/components/Select.vue
@@ -428,6 +428,7 @@
       return {
         search: '',
         open: false,
+        composing: false,
         pushedTags: [],
         _value: [] // Internal value managed by Vue Select if no `value` prop is passed
       }
@@ -805,7 +806,7 @@
           case 13:
             //  enter.prevent
             e.preventDefault();
-            return this.typeAheadSelect();
+            return !this.composing && this.typeAheadSelect();
         }
       }
     },
@@ -883,6 +884,8 @@
               'value': this.search,
             },
             events: {
+              'compositionstart': (e) => this.composing = true,
+              'compositionend': (e) => this.composing = false,
               'keydown': this.onSearchKeyDown,
               'keyup': this.onSearchKeyUp,
               'blur': this.onSearchBlur,

[sagalbot]

Thanks for bringing this one to my attention and providing such a detailed solution! I have just completed #971 that allows hooking into the search keydown handler. I will add this to that PR.

[sagalbot]

In #971 I've also added the same check for !this.isComposing for the tab key. @d-sawada can you confirm if that is necessary?

[sagalbot]

Marking this as closed by #971.