vuetifyjs
[Bug Report][3.3.7] v-select list changes width wildly while scrolling
Environment
Vuetify Version: 3.3.7 Last working version: 3.3.6 Vue Version: 3.3.4 Browsers: Firefox 115.0 OS: Windows 10
Steps to reproduce
Make sure your screen/window is not too large, so that some of the list items are wider than the select field. scroll through the list with mousewheel and by dragging the scroll bar.
Expected Behavior
the dropdown list has the width of the widest item.
Actual Behavior
the dropdown list changes its width depending on which items are rendered.
Reproduction Link
https://play.vuetifyjs.com/#...
Other comments
With the introduction of virtual scroll, there is a not so nice side effect: If the v-select width is smaller than the width of some list items, the list does change its width once these long items render. Scrolling through the list with the mouse wheel feels OKish, but dragging the scroll bar feels very weird, because the width change maybe triggers mousemove events.
Not sure if there is any feasible way to predict the width of all elements without rendering them...
I think this is expected behaviour. because team implemented virtual scrolling for better performance. if you know max width you can use css to set width for your select
I agree that this is kind of expected with virtual scrolling.
However, it is (a) a change in behavior (to my understanding it is not optional) and (b) when dragging the scroll-bar, the behavior feels so weird/jumpy, that I think it should at least improved to feel similarly smooth to mouse-wheel scrolling.
In the screen video below I try to drag down continuously and slowly. (Watch until the end)
I think, beyond the width change, a second issue is that when using the scroll bar, the scrollbar jumps to uppermost position upon every width change. So there is also a scroll-jump in addition to the width change.
Well, and sure I thought about if I know the width of the widest object and fix it... but if it is easy to do, it would be better if vuetify would do it.
Looking at a few other libraries, they either have the same problem (quasar), or limit the menu width to the same as the input (virtual-select-plugin, material-ui, element-plus, angular/material). You can do the latter in vuetify with :menu-props="{ maxWidth: 0 }"
