nathanreyes / v-calendar

An elegant calendar and datepicker plugin for Vue.
https://vcalendar.io
MIT License
4.38k stars 856 forks source link

[Vue 3] how to prevent submit on keydown.enter #1398

Open shinnlu opened 11 months ago

shinnlu commented 11 months ago

there are many input element on my form, i can press 'enter' to focus on next element in Vue 2.

<date-picker 
    v-model="item.BirthDate" 
    :model-config="vdpModelConfig" 
    :popover="vdpPopOver" 
    @keydown.enter.native.prevent="noop" 
    tabindex="12">
    <template v-slot="{ inputValue, inputEvents }">
        <input class="form-control text-center" :value="inputValue" v-on="inputEvents" readonly=""/>
        <span v-show="isDateEmpty(inputValue)" class="remove" @click.stop="item.BirthDate=''">x</span>
    </template>
</date-picker>

noop is a function to get focus to next element. but i can't do this in Vue 3, the form will submit when i press 'enter'.

jeppe-smith commented 11 months ago

The .native modifier has been removed in vue 3 (https://v3-migration.vuejs.org/breaking-changes/v-on-native-modifier-removed.html). Try @keydown.enter.prevent="noop" instead.