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

[mgholam]

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).

[sagalbot]

Is the issue you're having that pressing enter submits the form, like in this example?

[mgholam]

Partly... my html is below the gif animation is
If I move the vue-select out of the form tag all is ok.

    <transition name="modal">
        <div class="modal-mask">
            <div class="modal-wrapper">
                <div class="modal-container">
                    <div class="modal-header">
                        <h3>$New In Doc$</h3><a class ="close2" @click="closeform()">X</a>
                    </div>
                    <div class="modal-body">
                        <div class="header">
                            <form>
                                <table>
                                    <tr>
                                        <td>$From$: </td>
                                        <td><input required v-model="docin.From" /></td>
                                    </tr>
                                    <tr>
                                        <td>$To$: </td>
                                        <td><input required v-model="docin.To" /></td>
                                    </tr>
                                    <tr>
                                        <td>$Letter Date$: </td>
                                        <td><input required style="width:300px;" v-model="LetterDate" @focusout="checkletterdate()" placeholder="yy/mm/dd, yy mm dd, yyyymmdd, yymmdd" />
                                        <button @click="today">$Today$</button></td>
                                    </tr>
                                    <tr>
                                        <td>$Due Date$: </td>
                                        <td><input required v-model="DueDate" @focusout="checkduedate()" placeholder="yy/mm/dd, yy mm dd, yyyymmdd, yymmdd" /></td>
                                    </tr>
                                    <tr>
                                        <td>$Letter Number$: </td>
                                        <td><input required v-model="docin.LetterNumber" /></td>
                                    </tr>
                                    <tr>
                                        <td style="vertical-align:top;">$Subject$: </td>
                                        <td>
                                            <textarea required v-model="docin.Subject" style="width:600px;height:150px;font-family:Tahoma;resize:none;"></textarea>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>$Owner$: </td>
                                        <td>
                                            <v-select label="fullname" v-model="selected" :options="users" style="background-color: white;"></v-select>
                                        </td>
                                    </tr>
                                </table>
                                <div style="background-color: white; border:solid; padding: 5px;">
                                    <label style="width:inherit;">$Add Attachments$</label><a href="/scan.exe">Download Scan.exe</a>
                                    <input type="file" name="files[]" multiple v-on:change="filechange" />
                                    <a style="margin-left:8px; margin-right: 8px;" href="#" v-for="i in files">{{i.name}}</a>
                                </div>
                            </form>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button class="actionbutton modal-default-button" @click="savedocin">$Save$</button>
                        <button class ="actionbutton modal-button" @click="closeform">$Close$</button>
                    </div>
                </div>
            </div>
        </div>
    </transition>

[mgholam]

I have found a workaround by adding .prevent to the buttons [I'm using vue.js]:

<button @click.prevent="today">$Today$</button>

[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

[aggrolite]

Still an issue. Any progress?

[mgholam]

I'm good, thanks!

[greggh]

Just ran into this problem, is there a fix?

[sagalbot]

Prevent Form Submission on Return

[sagalbot]

Fixed https://github.com/sagalbot/vue-select/releases/tag/v2.3.0

[taylormaguire]

Hi @sagalbot, I am having this problem on version 3.1.0 when dropped into a form tag in a laravel blade file. Enter button always wants to submit the form on a multiselect.

[nicolasigot]

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

[paceDOT]

thanks @nicolasigot

[fredrivett]

A minor tweak on @nicolasigot's great suggestion above, from my tests you don't need the ="" on the end, but can simply do: @keypress.enter.native.prevent