Clicking on input with keyup.enter.prevent form is submitted anyway

Question

In @vue/cli 4.1.1 app I use bootstrap-vue and I have a form with 2 tabs : on 1st tab several fields and clicking Enter key on any control my form is submitted as expected, but I have the second tab with listing of meta keywords and single input control I want clicking on this control

v-on:keyup.enter.prevent="addMetaKeyword()"

to run update method, but without form submitted, but failed as my form is submitted. I do like :

 <template> <b-card class="backend_editor_container"> <b-card-header> <h3 class="row_content_left_aligned p-2" v-show="is_page_loaded"> <i :class="'info_link '+getHeaderIcon('page')"></i>{{ getHeaderTitle }} </h3> <div v-show="!is_page_loaded"> <h3> <b-spinner variant="success" label="Page loading"></b-spinner>&nbsp;Page loading... </h3> </div> </b-card-header> <b-card-body v-show="is_page_loaded"> <div> <b-tabs content-class="mt-3" justified> <b-tab title="Details" > <ValidationObserver ref="pageObserverForm" v-slot="{handleSubmit}" > <b-form @submit.prevent="handleSubmit(onSubmit)"> <b-row class="editor_row" v-if="!is_insert"> <b-col md="4"> <label for="id" class="pt-2 ">Id:</label> </b-col> <b-col md="8"> <b-form-input id="id" v-model="pageForm.id" readonly class="text-right" ></b-form-input> </b-col> </b-row> ... </b-tab> <b-tab title="Meta" active > <fieldset class="bordered text-muted p-0 m-0 mb-4"> <legend class="bordered">Add meta keyword</legend> <b-row class="editor_row"> <b-col md="4"> <label for="new_meta_keyword" class="pt-2 ">New meta keyword:</label> </b-col> <b-col md="8"> <b-form-input id="id" v-model="new_meta_keyword" class="text-left" v-on:keyup.enter.prevent="addMetaKeyword()" ></b-form-input> </b-col> </b-row> <div class="buttons_container"> <b-button type="button" variant="primary" size="sm" @click.prevent="addMetaKeyword()" class="m-1 ml-4"> <i :class="'info_link '+getHeaderIcon('save')"></i>Add </b-button> </div> </fieldset>

How correct ?

"bootstrap-vue": "^2.3.0", "vue": "^2.6.11",

Modified BLOCK #1 :

 addMetaKeyword() { this.new_meta_keyword = this.trim(this.new_meta_keyword) if (this.isEmpty(this.new_meta_keyword)) { this.showPopupMessage('Page editor', 'Meta keyword can not be empty !', 'warn') return } let l = this.metaKeywordsList.length for (let i = 0; i < l; i++) { if (this.metaKeywordsList[i] === this.new_meta_keyword) { this.showPopupMessage('Page editor', 'This Meta keyword is already defined !', 'warn') return } } this.metaKeywordsList[this.metaKeywordsList.length] = this.new_meta_keyword this.new_meta_keyword = null this.showPopupMessage("Page editor", 'You need to save changes in meta keyword mby clicking on "Update" button !', 'success'); },

Thanks!

What does addMetaKeyword() do? And does it contain any logic that might result in form submission? — Terry
– Terry, Commented Feb 18, 2020 at 12:54
Just checking that input is filled and pushing entered data into array. Nothing like form submittion. Please, look at Modified BLOCK #1 — Petro Gromovo
– Petro Gromovo, Commented Feb 18, 2020 at 13:46
@PetroGromovo This is bit of a sidenote, but i would recommend using the b-form-group component to structure your label/inputs as it supports Horizontal layout that you're currently doing "manually" with b-row's and b-cols — Hiws
– Hiws, Commented Feb 18, 2020 at 14:17

Hiws · Accepted Answer · 2020-02-18 15:43:22Z

The problem is that the keyup event is not preventable. Instead use the keydown event like so <b-input @keydown.enter.prevent="yourMethod"></b-input>, this will run yourMethod without submitting the form.

new Vue({ el: "#app", methods: { onSubmit() { console.log('Form submitted') }, doOtherStuff(){ console.log('Doing other stuff') } } });

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script> <script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script> <link href="https://unpkg.com/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/> <link href="https://unpkg.com/[email protected]/dist/bootstrap-vue.css" rel="stylesheet"/> <div id='app'> <b-form @submit.prevent="onSubmit"> <h1>This will submit your form</h1> <b-input></b-input> <h1>This wont submit your form</h1> <b-input @keydown.enter.prevent="doOtherStuff"></b-input> <!-- Needs the button to handle submit, I'm hiding it in this case --> <b-btn type="submit" class="d-none"></b-btn> </b-form> </div>

With keydown my input works ok but, but looks like common submit for the form does not work now. Any addtive options?
@PetroGromovo I've added a snippet to the answer, which shows that it should submit normally. I see you're using VeeValidate which might be the cause of the form not submitting anymore.

Collectives™ on Stack Overflow

Clicking on input with keyup.enter.prevent form is submitted anyway

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related