vuejs preventing form submit from a child component

Question

I'm building an autocomplete component which is loaded dynamically from the parent using

<div>
        <input type="text" 
        :placeholder="myResources.Placeholder" @input="onChange" @keyup.down="onArrowDown" @keyup.up="onArrowUp" @keyup.enter.prevent="onEnter($event)" @blur="onBlur"v-model="search" />
        <ul id="autocomplete-results" v-show="isOpen" class="autocomplete-results">
            <li class="loading" v-if="isLoading">
                Loading results...
            </li>
            <li v-else v-for="(result, i) in results" :key="i"
            @click="setResult(result)" @mouseover="onMouseOver(i)" 
            class="autocomplete-result" :class="{ 'is-active': i === arrowCounter }">
                {{ result }}
            </li>
        </ul>
    </div>

Basically when the user starts typing a list of search results shows up, and they can select between the results using the up and down arrow keys, and then confirm their choice by pressing enter (or they can use the mouse). Problem is, the component is placed inside a tag in the parent. And pressing Enter submits the form. I have tried catching the event, using

@keyup.enter.prevent="onEnter($event)"

or calling event.preventDefault() in the event handler. None of this works. Breaking inside the event handler, I found out that the submit on the form happens before the handler is triggered. I thought maybe the event originates on the or

elements, but when I stick event handlers on them, they don't get called.

How do I tell the parent "don't submit" and actually have it listen?

As I mentioned, the component is rendered dynamically inside a parent. The problem

Tanner Tanner · Accepted Answer · 2019-10-09T14:59:53

In your onArrowUp and onArrowDown functions, you should focus() the child component. That way, the Enter key is definitely called on the child item.

From there, change your @keyup.enter.prevent to @keyup.enter.stop to stop event propagation back up to the parent.

vuejs preventing form submit from a child component

1 Answers