[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:

vuetify/src/components/VSelect/VSelect.js

Lines 221 to 225 in 297c80e

	virtualizedItems () {
	return !this.auto
	? this.computedItems.slice(0, this.lastItem)
	: this.computedItems
	}

[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.

[v1talii-dev]

: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+

[nikalsh11]

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

Thanks.

This also solved another issue with v-select where the scrollbar would occasionally not function at all (50+ items and customised css). Can confirm this works in Vuetify 2.4.2.

[hosseinmirhosseini76]

I fixed this by removing my height style on the page :)

[halimb]

:menu-props="{ maxHeight: 'none' }" worked for me

[handhikadj]

i'm having this on v2.5.8
the :menu-props workaround doesn't work

[bifshteks]

That's really a problem, because in case, when the height of menu is large enough to include 20 items visible on the screen,
the scrollbar does not appear, so user have to ways to scroll (thus, lazy loading will never load the rest of items)

[johnleider]

That's really a problem, because in case, when the height of menu is large enough to include 20 items visible on the screen, the scrollbar does not appear, so user have to ways to scroll (thus, lazy loading will never load the rest of items)

This is absolutely a flaw in the system. I did it this way as a stop gap to not having a virtual-scroll component and it sort of stuck that way over the years.

No worries though, it is something we are addressing for Vuetify 3.

[juhasev]

Hi guys, the only way to fix the scrollbar issue is to set the menu props as follows:

:menu-props="{maxHeight: '80%', overflowX: true}"

This will load up all the elements and add scrollbar after 80% of height is consumed.
Yeah I know it is kind of weird that you need to add overflowX: true. Happened stumble on this after fighting for an hour!

[jsodeman]

As a related note, the lazy loading creates problems when doing e2e testing like cypress because the value you want might not be rendered yet. While I understand the performance issue, having to add :menu-props="{ auto: true }" to every v-select in our app so we can test is not fun.

[johnleider]

As an update to this thread, Vuetify 3 selects all integrate virtual-scrolling by default. Closing this as completed.

[jhonprimedev]

Any update? The problem persists with 80 elements in "vuetify": "^3.4.6", is this bug still being worked on? Regards

[johnleider]

Any update? The problem persists with 80 elements in "vuetify": "^3.4.6", is this bug still being worked on? Regards

Provide a reproduction and create a new issue, please do not comment on closed issues.