combobox scroll handling is janky with virtual lists on first/last element

[stefanprobst]

What package within Headless UI are you using?

Combobox component from @headlessui/react and @headlessui/vue

What version of that package are you using?

1.7.2

What browser are you using?

Firefox

Reproduction URL

https://github.com/stefanprobst/combobox

Describe your issue

When using a headlessui combobox with @tanstack/react-virtual, the scroll handling here seems to conflict with the virtual list, and leads to weird jankyness when trying to scroll the first or the last element in the list.

In this video (from the reproduction repo), the mouse cursor is placed over the last element in the list, and is trying to scroll up

https://user-images.githubusercontent.com/20753323/192153651-3512dd54-00e0-4a4e-ba65-0a14d35f9191.mp4

Note that when scrolling fast enough (like at the end of the video) it is possible to "skip over" the issue.

(I've run into the same issue with useVirtualList from @vueuse/core with @headlessui/vue)

[thecrypticace]

Hey, was taking another look at this.

The general thought here is that Headless UI does a bunch of DOM manipulation and crawling so we know what's first / last and can adjust our behavior accordingly. A virtual scroller can make that much more complicated because those calculations can no longer be based on the DOM but the virtual scroller's view of the DOM. It's likely that we would have to either provide our own virtual scroller implementation or somehow figure out appropriate extension points. This would likely be a significant undertaking.

I was going to look at the reproduction but I noticed it no longer exists. I did find another headless UI combobox repo in your profile that I thought might've been it but it was not. Gonna close this for now but if this is still a problem for you could you open a new issue with a reproduction?

[stefanprobst]

thanks for your answer! makes sense, i guess that's why react-spectrum have their own virtual scroller, and ariakit is currently adding their own as well.

if you still want to take a look at the reproduction repo - i forgot to make it public, sorry, should be accessible now.

[ayhanap]

I am having the same issue, but only on the responsive mode of the developer tools. You can't scroll past the active item.

When using pointer, when you start to scroll, active item gets lost, but on mobile view it stays active always.

[lauri865]

Seeing the same issue, but primarily on Safari. There's a tiny jank in Chrome on top/bottom, but in Safari it's unusable, and somehow happens only when you trigger the active/hover state before scrolling, regardless of the position.

[Christian-Schoenlein]

I am having the exact same problem. As the active option cannot be programmatically set it seems impossible to fix right now.

Is there a working solution maybe with a different virtualisation library like react-virtualized or react-window?

Or any plans on built in virtualisation for the Combobox?