I'm currently working on a custom component called customCombobox. It functions similarly to a regular v-combobox, but with an added feature - after the user presses the tab key, it automatically selects the first option available.
Everything in my implementation seems to be functioning correctly, except for the fact that the v-model on this field is consistently returning as null.
<template>
<v-combobox ref="combobox" :rules="rules"
@keydown.tab.prevent="selectFirst"
:value="innerValue" :label="label"
:items="items"
>
</v-combobox>
</template>
<script>
module.exports = {
props: ['value', 'label', 'items', 'rules'],
data() {
return {
innerValue:null,
}
},
watch:{
value(_new){
this.innerValue = _new
this.$emit('input',[_new])
this.$emit('change')
}
},
methods: {
selectFirst() {
var combobox = this.$refs.combobox
var filteredItems = combobox.filteredItems
if (filteredItems.length){
this.innerValue = filteredItems[0]
}
}
},
computed: {
}
}
</script>
Any idea what might be causing this issue?