I’m trying to set the focus in next element v-select startdate which have a dropdown select input element. But the methods I’ve found online using nextTick , $refs.input and etc. are not working. After I press enter the focus must go to the next above element startDate . I’m getting an output that after I press enter focus now go to Cutoffdate below and into View report, the startDate is not included in the focus please help me fix this problem.Here is my template
<header-component
:titleWidth="270"
class="vue-header"
>
<div slot="appendComponent">
<v-card class="filter-card" width="270px">
<autocomplete-clients
@update:clients-data="receiveClients"
:prependIcon="null"
:reset="reset2"
@keydown.enter.native="handleEnterKey"
></autocomplete-clients>
</v-card>
</div>
<div slot="filters">
<v-row>
<v-col class="col-auto">
<v-card class="filter-card dft-width">
<v-select
dense
class="ma-0 pa-0"
ref="startDateSelect"
:items="startDates"
v-model="startDate"
label="Startdate"
placeholder="Select Start Date"
hide-details
></v-select>
</v-card>
</v-col>
<v-spacer></v-spacer>
</v-row>
<v-row>
<v-col class="col-auto">
<v-card class="filter-card dft-width">
<datepicker-start-date
label="Cutoffdate"
:prependIcon="null"
:startDate="cutoffDate"
@input:date="receiveCutoffDate"
dateFormat="MM/DD/YYYY"
></datepicker-start-date>
</v-card>
</v-col>
<v-col class="col-auto">
<v-btn
class="ma-0 pa-0 dft-width2"
color="primary"
@click="onViewReportClickHandler"
x-small
>
View Report
</v-btn>
</v-col>
</v-row>
</div>
</header-component>
methods: {
handleEnterKey() {
this.$nextTick(() => {
const selectInput = this.$refs.startDateSelect.$refs.input; // Vuetify v-select exposes $refs.input for the actual input element
if (selectInput) {
selectInput.focus();
}
});
}
}
I’ve try putting them inside v-form them implementing a @blur enter key but I can’t make it work.