[Bug Report][3.3.19] VAutoComplete / VSelect with more than 12 items breaks list wrapping behavior

[quinnlemon]

Environment

Vuetify Version: 3.3.19 Vue Version: 3.3.4 Browsers: Chrome 117.0.0.0 OS: Mac OS 10.15.7

Steps to reproduce

Add more than 12 items to an VAutoComplete or VSelect and the wrapping behavior no longer wraps to the bottom or top correctly.

Expected Behavior

Pressing the UP keyboard key on the first item of the list should jump focus to the bottom of the list. Pressing the DOWN key at the bottom of the list should jump to the top of the list.

Actual Behavior

Pressing the UP arrow key on the first item jumps down 12 items in the list. At the last item of the list pressing DOWN jumps up to item 9 instead of item 1.

Reproduction Link

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

[yuwu9145]

This issue has been resolved since v3.4. demo

[khamasaki]

Hi -

We are still running into this issue. It has not quite been fixed, it just requires more items to trigger.

Reproduction link

[johnleider]

Hi -

We are still running into this issue. It has not quite been fixed, it just requires more items to trigger.

Reproduction link

Your playground works just fine.

[khamasaki]

Hmm ... if I click on either of the controls and press the up arrow, it goes to number 45 instead of 60. If I then press down until I reach the end of the list and then down one more time, it goes to number 48 instead of 1. Is this not what you are seeing?

Sorry, should have included this:

Environment Vuetify Version: 3.4.6 (in the repro link, also tried 3.4.8) Vue Version: 3.4.9 (in the repro link, also tried 3.4.10) Browsers: Chrome 120.0.6099.129 (Official Build) (arm64) OS: Mac OS 13.4

[johnleider]

The only difference is I'm not on Mac.

[khamasaki]

I am seeing this on Windows Chrome and Edge as well. Here is a video showing what is happening when I navigate the list with the keyboard.

https://github.com/vuetifyjs/vuetify/assets/5796887/09a95d59-b9ec-48aa-aadc-be9b0d394ef0

[johnleider]

This is what I get:

[khamasaki]

Wow, that is very interesting. May I ask what platform you are on? Also, if it's not too much trouble, can you try it with even more items, like maybe 100?

Since I can reproduce this, I'll poke around in the source code to see if I can figure out what is going on.

[johnleider]

WIN11, Chrome 120

[khamasaki]

Thanks. The Windows machine I was trying on is Win 10, but it seems bizarre that that would affect anything. Anyway, I actually probably can't look into this for at least a week or so, but I will try to get to it as soon as I can.

[johnleider]

If I increase the number of items it goes up:

https://play.vuetifyjs.com/#eNptUNFqhDAQ/JUlT0o9vaOlUPGEg/5BoS+1lK2urVw0ISbSIv57c4meV+6eNruzMzuTt5H1qkwOUsaDIZayTFMrOWrKiw4gGzYlqsq9fSc6jU1HCmpumgVwEBotSmHJpGkZAwybVlTE9wUbkBvqC7ZiaWOP9RZy9RLh+Ok4z1Sj4XqF8iz5f2l18PpCnEp9pXrDglWZt5dkVvUczSc/TXz0LLn4E9v2pWqkZ9KPFEpD5W3C6NUq1JhCEMI+h2CeATg7KRyUwt+4VqINRuDUfenvFHbbLUxh3KIMgo8Ijo56hDvYhdHC9+bt7jyZPDSdDJ4tsSli9/FD/Mh8fWLvfwuJlDo=

Seems like a race condition of sorts.

[khamasaki]

Interesting. I've polled the people around here and some of them see the behavior and some don't. You are probably correct.

[yuwu9145]

I'm on it

[J-Sek]

When searching by title it gets even more bizarre another reproduction with list of states

[AlexanderZon]

Hi, i think this is the same problem that i'm getting, but it happens especifically when i have a v-slot:item rewriting the option template, it stops rendering the option in a certain specific number of elements (only with the v-slot:item), and if i change the window of screen with a different dimension this number gets reduced or incremented (it's really weird). Only if i write a thing in search input it resets the list to view all options in the input.

Environment Vuetify Version: 3.7.7 Vue Version: 3.5.13 Browsers: Chrome 131.0.6778.265 OS: Windows 11

Here the reproduction of the problem