pressing Enter key submits the form

[purepear]

When using up/down keys and then enter key to select it submits the form.. how do i stop it propagating the event?

[nacr]

In your form element add @submit.prevent=""

[purepear]

i'm using vue-formular ... if you know sth better for handling validation easy.. i'm new to Vue and open to suggestions but i don't think @submit.prevent="" will work with vf-form

[nacr]

my bad did not realize you were using vue-formular

[sagalbot]

Hi @purepear thanks for bringing this up. I had @keyup.enter.prevent="typeAheadSelect", but what I really need is @keyup.enter.stop="typeAheadSelect" to stop the enter key event from bubbling up. Will fix and release today.

[purepear]

Hi @sagalbot, @nacr-dev i did some testing and i fixed it by adding <vue-select @keydown.enter.prevent="" ...> component itself

[davodaslanifakor]

please more descript about problam ...
i hav somting problam
i have a form and use v-select ajax and when select in list by enter my form submiting but i whant submit when click btn submit form

[antidiestro]

this hasn't been fixed yet? :(

[davodaslanifakor]

@ReneMoraales
hi don't remember i change my plugin vue-multiselect

[deleugpn]

Having this issue as well.

[enriqg9]

Same Here. Having this issue as well.

[deleugpn]

I added @keydown.enter.prevent="" in the form tag which wraps the component that will have the v-select inside.

[enriqg9]

I had to add it to the parent component, not to the form itself, as v-select in my case is not a direct child of the <form> element.

<form>
  <component> <!-- Added @keydown.enter.prevent on the root element of this component -->
    <v-select>

[DoDSoftware]

I dont understand why this is closed. This is still an issue. Why would pressing enter in the search field of the v-select cause the form to submit? Seems like very unexpected behaviour.

[sagalbot]

Prevent Form Submission on Return

[gdev219]

Add @keydown.enter.prevent.self to form tag or parent of where event fires.

[ElvysAraujo]

Hi @gdev219 , thank you, works perfectly!

[AlexGnatko]

Add @keydown.enter.prevent.self to form tag or parent of where event fires.

Just to clarify, it turns out that it's enough to put "@keydown.enter.prevent.self" with no value to any DOM element which is a child of the form and a parent of the vue-select.

<div @keydown.enter.prevent.self>
<v-select ... />
</div>

[bagaskarala]

Add @keypress.enter.native.prevent="" to the v-select element.

So enter to submit form still work in native form element (outside v-select element)

[marcobuccio]

Adding @keypress.enter.native.prevent="" isn't a good solution for me. The @keypress.enter.native.prevent="" prevent the enter key in the multiselect so the user can't chose an option with press enter.

[avnishjayaswal]

Hello

I got an answer here please take a look

Vue prevent form submit on enter

thanks

[beakid]

The only thing that worked for me was using the mapKeydown prop https://vue-select.org/guide/keydown.html#mapkeydown

Template:
<v-select :map-keydown="handlers" ... >

Function:
handlers(map: any, vm: any) {
return {
...map,
13: (e: Event) => {
e.preventDefault();
e.stopImmediatePropagation();
return vm.typeAheadSelect();
}
};
}

This should be the accepted answer imo :)