Not select-able with 'enter' key in a form tag

I have a <form> tag with vue-select in it and the item is not select-able when I press ‘enter’ (mouse select works fine).

[nicolasigot]

I was just able to prevent it by adding: @keypress.enter.native.prevent=“” to the v-select element.

[bformet]

I confirm issue that pressing enter in v-select submits the form.

My code:

<form @submit.prevent="submitForm">
    <input v-model="name" type="text" required>
    <v-select :options="countries" v-model="country"></v-select>
    <button type="submit">Submit</button>
</form>

Is there a workaround?

I cannot do the following because I’d loose the validation of required fields. <button type="button" @click="submitForm">Submit</button>

I suppose enter key event is bubbling too far. Any idea how to solde this?

Thanks