Vue-select: Enter submits the form

[udimitri]

Describe the bug
When enter is pressed, the form submits. This makes searchable tagging difficult. It looks like the problem is its prevented on keyup instead of keydown. I saw #249, I'm not sure if it was intentional in v3 or was just missed.

To Reproduce
Steps to reproduce the behavior:

1. Go to codepen
2. Focus the select and click enter.

Expected behavior
Only the value should be selected, the form should not be submitted.

Desktop (please complete the following information):

• OS: Windows 10
• Browser: Chrome
• Version: 73.0.3683.103

[rdarcy1]

For anyone needing a (hacky) workaround until #849 is merged, see a possible solution here: https://codepen.io/RobinKlever/pen/pXrRKP

I attached a submit event handler to the form, then on every event check to see if the event originated from within the vue select element.

[vkazakevich]

To fix this error, just add @keydown.enter.prevent.self="" parent of vue-select component.

e.g. <form @keydown.enter.prevent.self=""><v-select>

[borekl]

@vitaliy-k Your solution will just prevent form submission with Enter, right?

[fadziljusri]

To fix this error, just add @keydown.enter.prevent.self="" parent of vue-select component.

e.g. <form @keydown.enter.prevent.self=""><v-select>

This is good example, but if you want prevent submit ONLY on v-select options when enter press :-

<form @keydown.enter="onEnterKeyDown"><v-select>

and in methods:

onEnterKeyDown(e) {
     if (e.target.className.includes("vs__search")) {
            e.preventDefault();
      }
}

[mihai-craita]

@vitaliy-k Your solution will just prevent form submission with Enter, right?

the @keydown.enter.prevent.self="" can be on a parent wrapper like a div, so the form can still submit on enter.