Combobox option list scrolling problem starting from v1.7.5

[AnnaYuS]

What package within Headless UI are you using?

@headlessui/vue

What version of that package are you using?

v1.7.5 and up

What browser are you using?

Firefox, Safari

Reproduction URL
https://stackblitz.com/edit/vue-gvtwnj?file=src/components/HelloWorld.vue

v1.7.4

Screen.Recording.2023-04-17.at.13.04.14.mov

v1.7.5

Screen.Recording.2023-04-17.at.13.03.48.mov

Describe your issue
Starting from v.1.7.5 there is a problem with the scroll when virtual list is used with Combobox options.
As was mentioned in this issue, the virtual lists don't work well with headless ui at the moment, but perhaps there is something that can be fixed in this case? Or maybe there is some sort of a workaround? This might have something to do with these changes
For now we had to pin v1.7.4, but we'd really like to upgrade to get all the fixes and new stuff
Before the upgrade to v1.7.5 the virtual lists weren't working perfectly, but they were more usable, and now scrolling is too problematic.
Your feedback would be greatly appreciated 🙏

[something123something]

so did u get a workaround?/fix/used a different library?

[yakobe]

Perhaps this is just a problem with the hold prop on ComboboxOptions? (see #2490)

When this is set to false i expect the active option to be deactivated when i scroll away from it. However, it currently stays active and then scrolls back to it.

@thecrypticace is there a way we can get around this problem. If we cannot "unset" thye active option then we have no way to use the combobox with large amounts of options 😭

[nielseulink]

I have the exact same issue after combining an listbox or combobox with useVirtualList. Is there any other workaround/fix besides locking the version down to 1.7.4?

[AnnaYuS]

I haven't found any workarounds 😞 Looking at alternatives to Headless UI at the moment like zagjs, and also someone working on Radix for Vue looks promising

[AnnaYuS]

Headless ui is awesome and widely used, it would be a pity to switch to something else, so i'm still hoping to hear back on this issue. Any update would be appreciated, even if there are no plans to fix it 🙏

[RobinMalfait]

Hey sorry for the late response @AnnaYuS!

We recently did a bunch of performance improvements for the Vue version of the Combobox component. One of those changes is that we delay marking an option as active if you are going to an other option in rapid succession. Can you check if this improves/fixes the issue. If not we will have to dig deeper, but checking that would be awesome.

You can try the insiders version using:

• npm install @headlessui/vue@insiders.

[AnnaYuS]

Thanks for your reply @RobinMalfait! Glad to hear that you are looking into it. Tried it out, but unfortunately the problem is still there. Maybe it's worth mentioning that in Chrome it works fine, the problem is with Firefox (starting from v1.7.5), in Safari it seems to also happen in versions older than 1.7.4

[rigtigeEmil]

Is there any update on this issue, or known workarounds? I'm experiencing the same, also in Chrome.
I tried the insiders version as well, which does not resolve the issue.

The issue only appears if an item has been hovered. If nothing is hovered, then the issue disappears

[Saul-BT]

Describe your issue Starting from v.1.7.5 there is a problem with the scroll when virtual list is used with Combobox options. As was mentioned in this issue, the virtual lists don't work well with headless ui at the moment, but perhaps there is something that can be fixed in this case? Or maybe there is some sort of a workaround? This might have something to do with these changes For now we had to pin v1.7.4, but we'd really like to upgrade to get all the fixes and new stuff Before the upgrade to v1.7.5 the virtual lists weren't working perfectly, but they were more usable, and now scrolling is too problematic. Your feedback would be greatly appreciated pray

I can confirm that the root of the problem comes from these changes.

Warning: don't do this, I just did it to confirm that the problem really comes from that change.

I took a look at the changes @AnnaYuS commented and saw that the useTrackedPointer hook was used. Then I roughly updated the code so that the aforementioned hook does nothing, and the scroll seems to behave correctly 🥲 .

---

Is anyone working on this? 🥲🥲🥲

[erquhart]

This is not Vue specific, happening in React, too as of 1.7.16.

I'm also seeing this as far back as 1.6.0 of the react lib, didn't check back further than that as other things started breaking.

@RobinMalfait issues like this make the decision to exclude virtualization (#474 (comment)) challenging. Combobox simply doesn't work for large lists, so there's an argument to be made for this being a core concern - even if "support" just means a tested example implementation using an external library like @tanstack/react-virtual.

I'm working on anchoring my current team's UI work in Tailwind UI (and therefore Headless UI) and am now working through this bug as a part of that effort. Maybe worth considering how one affects the other here.

[erquhart]

Also this does seem to be relevant, there's more comments after it was closed that clarify the issue: #2490

[Saul-BT]

Hi, I managed to avoid most of the cases where this happens.
But in trade off for probably affecting accessibility....

<ComboboxOption
    v-for="option in list"
    v-slot="{ active }"
    :key="option.data.id"
    :value="option.data"
    :title="option.data.value"
    as="template"
    class="tw-h-9"
    >
      <li
        @focus.prevent
        @mouseenter.prevent
        @pointerenter.prevent
        @mousemove.prevent
        @pointermove.prevent
        @mouseleave.prevent
        @pointerleave.prevent
        :class="[
          active
            ? 'tw-bg-slate-100 tw-text-slate-900'
            : 'tw-text-slate-700',
          '... hover:tw-bg-slate-100 hover:tw-text-slate-900',

As you can see, I use event.preventDefault() for the events focus, mouseenter, pointerenter, mousemove, pointermove, mouseleave and pointerleave. This is a very dangerous workaround and don't work in all cases (ex. when the first option is active, and you pretend to scroll with the mouse over that option).

[firstpromoter]

This issue is really bad. We're looking for alternative in this case, even though we're a paying customer of Tailwind UI. There's a huge performance problem with combobox, even with relatively few items which forces us to use virtual list. However, with virtual list we get this issue which we can't fix and is not something we can use going forward.