Vuetify: [Bug Report] V-Select scrolling behaviour

[asiFarran]

Versions and Environment

Vuetify: 0.17.3
Vue: 2.5.9
Browsers: Chrome 62.0.3202.94
OS: Windows 7

Steps to reproduce

Give the select component a largish number of items (anything above 50 will do).

Open the select and start scrolling

Expected Behavior

The scrollbar thumb should be of constant height (representing the relationship between the overall height of the item list and the height of the popup element), and scrolling should be fluid and linear

Actual Behavior

The scrollbar's thumb starts off too high and as you begin to scroll, changes it's height and jumps to a different location on its track - basically disappearing from under the mouse cursor - thus leading to a jittery and uneven scrolling action making it almost impossible to reach the bottom of the list

Reproduction Link

https://codepen.io/anon/pen/RjYmJb?editors=1010

[KaelWD]

v-select lazy-loads items 20 at a time for performance reasons. This could be done with a set number of items at some point in the future though.

[asiFarran]

I understand the perf concern but shouldn't the UX concern take precedence here?

The current strategy makes the component practically unusable when dealing with long lists so what's the point of having nice perf in a context that no-one would ever use unless they like to hear their users complain.

[cars10]

Yeah, that behaviour is really annoying and not at all user friendly. Any updates on that?

[KaelWD]

It was removed in 1.1 but had to be added back because of the massive performance impact if you have a lot of records. We're planning to add proper list virtualisation at some point, but probably not in 1.1

[cars10]

How about changing it into a prop? In my current project for example I have a fixed amount of about 150 records, would be cool if I could set the value myself.

[KaelWD]

Looks like the auto prop will render the entire list: https://github.com/vuetifyjs/vuetify/blob/297c80e6463fbb7e8f195e4d0256e98aa26c3a00/src/components/VSelect/VSelect.js#L221-L225

[cars10]

Great, thank you! Using auto will indeed render the whole list, guess i missed that in the documentation. Sadly this seems to break max-height (now having no effec, at least on 1.0.17), but i will use it anyway. Thanks!

[Webifi]

:auto="true" doesn't seem to fix this for me on 2.1.6 -- and, if it did work, could kill performance when I only need to scroll to position 50 out of 300.

I think this could be solvable if we could easily change the default value of 20 for VSelect.lastItem to something else via a prop.

Could it be as simple as just adding something like this to VSelect.ts?:

props: {
  ...
  defaultLastItem: Number,
  ...
},
mount () {
  ...
  if (this.defaultLastItem > this.lastItem) this.lastItem = this.defaultLastItem
  ...
},
watch: {
  ...
  defaultLastItem (v) {
    if (v > this.lastItem) this.lastItem = v
  }
  ...
}

[avrtau]

Is there any news on this issue? Is there a work-around?

[londos]

Updating :auto="true" to :menu-props="{ auto: true }" worked for me.

[avrtau]

Updating :auto="true" to :menu-props="{ auto: true }" worked for me.

Passing menu-props="auto" worked. Thanks

[johnleider]

This is pending the completion of #10944. Otherwise it will be bumped.

[VitaliyDemchuk]

:menu-props="{ auto: true }" dont work in version 1.5.22. In which version does it work?

[avrtau]

:menu-props="{ auto: true }" dont work in version 1.5.22. In which version does it work?

Works on Vuetify 2.2+