vuetify
vuetify copied to clipboard
vuetifyjs
[Bug Report][3.4.0] VSelect - Menu alignment not consistent
Environment
Vuetify Version: 3.4.0 Vue Version: 3.3.8 Browsers: Chrome 119.0.0.0 OS: Windows 10
Steps to reproduce
- Focus the VSelect
- Scroll to the bottom
- Scroll back to the top
Expected Behavior
The menu should remain aligned to the right edge of the select per the menu props location
Actual Behavior
It does initially and while scrolling down but when scrolling back to the top it moves to the center
Reproduction Link
https://play.vuetifyjs.com/#...
Other comments
It seems like its incorrectly checking if it has enough space on the right side.
If you adjust the margin-right on the v-select to something like 150px everything works as expected
Is this at a specific screen width? It never changes position while scrolling for me.
Possibly related to #17126 or #17751
#17751 is mostly talking about the select menu width changing, which that makes sense and I agree that should be expected. This is more just about the alignment changing, which is similar to #17126 but not exactly the same.
I dont think its screen size related, i tried on a large and small screen as well as firefox and chrome. Here is a video if that helps:
https://github.com/vuetifyjs/vuetify/assets/50124194/111db113-22bd-4a57-bb0c-ea31449597bf
So yes this is #17751, only happens with screen height <900px in that example.
There's some weird shit going on with text wrapping here I think, when that item first renders the list getBoundingClient().width is 480px then updates to 500px the next frame.
I noticed the client rect width off as well when debugging but couldn't exactly figure out why. If you are sure this is a duplicate of 17751 this can certainly be closed