[Bug Report][3.1.5] Combobox list closes immediately when not enough vertical screen space

[joergd]

Environment

Vuetify Version: 3.1.5
Vue Version: 3.2.47
Browsers: Chrome 110.0.0.0
OS: Mac OS 10.15.7

Steps to reproduce

Reduce your vertical screen/browser space to only make space for a few items in the dropdown. Then open the combobox.

Expected Behavior

Show a scrollable list of items

Actual Behavior

List briefly shows then disappears again.

Reproduction Link

https://play.vuetifyjs.com/#...

Other comments

If there are too many items in the combobox, it renders it unusable when the vertical browser size is too small. If the combobox is replaced with a select, it seems to work fine.

[joergd]

I'm not sure whether it is connected or not, but sometimes I click on a v-select or v-combobox to open it, and the arrows show that it is open, but the list is not visible. My feeling is that the list is rendered in a position that is not visible on the screen. After repeated attempts it renders the dropdown list in the correct position.

[joergd]

wrt to the comment above - when there isn't enough vertical space, it renders the v-select's dropdown list only briefly before disappearing - like in the original bug report - but additionally - it renders the list with the z-index wrong - so it flashes up behind my v-dialog. After the 3rd or 4th attempt, it renders the list correctly - in the proper position, the correct z-index, and it doesn't flash. See video below ...

https://youtu.be/DqoefyroMTU

And yet other times - when there is enough vertical space - it first renders the v-select list offset by about 50px from the text-field. Then I close and open again, and it renders it properly...?

[KaelWD]

@joergd can you reproduce that too? The original issue seems to just be opening on mousedown then closing on mouseup, z-index and positioning is unrelated.

[joergd]

I've been struggling to reproduce on the playground.

I went back version-by-version to see when this issue was introduced, though, and it started v3.1.3. The previous version v3.1.2 works as expected and the z-index and/or position isn't messed up the first few attempts at opening the v-select.

The issue also only happens (from v.3.1.3) when there is limited vertical space. I still haven't quite nailed it where it is the pure vertical space that is the issue, or whether it has something to do with the Intersection Observer and needing to scroll down to the component etc. I can reliably reproduce the issue in my app (as seen in the video) - but I haven't been able to narrow it down to make it reproduce on the playground.

The v-select appear in a dialog, which has multiple tabs..

[jarena3]

hello all, I've also come here to report the second issues @joergd found and, likewise, am having a very hard time reproducing it outside of my project. I too have a video:
https://youtu.be/sfLUxiQhtRU
I'm seeing the issue on v-selects, v-comboboxes, v-autocompletes, and v-menus. All (in my case) within v-dialogs. It doesn't look like I'm running into screen height issues, but it does look like it's something to do in terms of sizing and z-positioning with the elements. After 2-3 attempts the elements all work correctly. Also in my case 3.1.2 works as expected.

I will continue to try and figure out how to reproduce this issue in vuetify play, but in the meantime: should we make another ticket for this to separate it from the original issue?

[joergd]

I have created a really layered Vuetify Play (with app bar, scrollable content, dialog box, autofocus, tabs, rows and columns etc - and still I cannot recreate. However on my app from v.3.1.3 I can reliably reproduce. v3.1.2 works as expected.

I will continue to spend time on this - this is affecting most of my users - but will revert to 3.1.2 for now.

(I can't create a separate ticket for this issue as I cannot create a Vuetify Play)

[KaelWD]

Open a new issue for that if you can reproduce it. I'll accept a github repo if you can't get it to happen in the playground.

[WhiteSage]

The list is not shown either in the following scenario: the v-select lies inside a v-dialog, the v-dialog is open via a button click, the main page does not fin within the screen and the user has partially or totally scrolled down before clicking the button. When the v-select is then closed and opened again then the dropdown is correctly shown. I see some flickering suggesting a dropdown list miscalculation, and seems related to what @joergd has described.

Reverting to 3.1.2 also fixes the issue in this case.

[joergd]

I have managed to create a Play for this issue.

#16777

[marcpaskell]

Appreciate this is combobox, but i've created a new play for the auto complete version.

If you reduce viewport to about 700px and click the autocomplete it will open and immediately close (unless you manage to click the very top of the input). You're also unable to remove closable chips etc

[malamanlucas]

I use Nuxt 3 with Vuetify 3.

My workaround to solve this problem is use with useVue

The pages /chamados/criar', '/chamados/edit are v-dialog with v-select
then when goTo these pages i set scroll to zero and when back to /chamados i revert the original state of scroll

`const scrollY = ref()

if (process.client) {
const { y } = useScroll(window)
scrollY.value = y
}

onBeforeRouteUpdate(async (to, from) => {
if (['/chamados/criar', '/chamados/edit'].some(e => to.path.includes(e))) {
oldY.value = scrollY.value.value
scrollY.value.value = 0
}
if (to.path == '/chamados') {
await doSearch()
setTimeout(() => {
scrollY.value.value = oldY.value
}, 200)
}
})`

[johnleider]

Video reproduction for future:

It's because click-outside is triggering on mouseup.