Search code examples
vuejs2vuetify.jsv-select

Vuetify - v-select not scrolled to pre-selected value

I have a v-select dropdown (vuetify), which are a list of time-slots with 15 minutes interval ['00:00','00:15'...'23:55']

Let us call it startTime which is pre-defined to f.x '12.00' and is binded with v-model to data.

The issue here is, when i click on startTime the dropdown is not automatically scrolled to the selected value, i have to manually scroll down. But WHEN i click a other value f.x 13.00 - and now when i click the startTime - it will automatically be scrolled to the selected value.

enter image description here

Here is a example of this behavior in code-pen https://codepen.io/Hoxi/pen/QWBXwVB

Here is a example which shows that it works if i select a value, now the dropdown will be scrolled into the selected value.

enter image description here So the issue is when the value is pre-selected, v-select wont be scrolling into the preselected value

Related issue: https://github.com/sagalbot/vue-select/issues/1169

Solution

  • I think menu-props="auto" can help you

    <v-combobox
  v-model="select"
  :items="items"
  menu-props="auto"
  label="Select"
  persistent-hint
  return-object
  single-line>
 </v-combobox>