[BUG] Menu component with dynamic content skips through items when using arrows

[ospfranco]

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

1.4.2

What browser are you using?

Safari

Reproduction URL

Here is a reproducible example

https://github.com/ospfranco/headless_ui_test

It's a simple creact-react-app, just use the text field to filter for an item (e.g. "6") after delete the field and try to move through the items with the arrows, the item "6" will be magically skipped

Describe your issue

Hi, I created a sort of combo box using a HeadlessUI Menu component, everything works fine until the point where I need to filter/interact with the component, I filter the elems based on an input, that works fine the first time the list is filtered, but later if I remove the query (and therefore reset all the contents of the menu), somehow arrow navigation is not working properly anymore, but rather it just skips over the items

Screen.Recording.2021-12-18.at.12.10.07.mov

is there any way to work around this behavior?

[andrewbeckman]

@ospfranco did you ever figure out a solution to this? Also, I think the example you attached doesn't include any headless ui code. Any chance you forgot to push up a commit?

[ospfranco]

Oopsie, forgot to push indeed, no, I haven't figured it out yet, but the code should be there in the example now

[andrewbeckman]

Ah okay thanks! I'm trying to build a combobox as well, but am thinking it might be better to just reach for a different solution until headless has a better out of the box solution for such a component.

[RobinMalfait]

Hey! Thank you for your bug report!
Much appreciated! 🙏

This should be fixed, and will be available in the next release.

You can already try it using:

• npm install @headlessui/react@insiders or yarn add @headlessui/react@insiders.
• npm install @headlessui/vue@insiders or yarn add @headlessui/vue@insiders.

[silvenon]

Hi @RobinMalfait 👋 I'm experiencing this issue as well, unfortunately. I'm using the latest version of Headless UI. Here is the repro: https://github.com/silvenon/repro/tree/headlessui-combobox-order (branch headlessui-combobox-order, run npm run dev)

To reproduce, first type "a" and navigate across results using arrows, things should work normally, but then type "e" ("ae" in total) and you should clearly see the problem when navigating with arrows again.

Screen.Recording.2022-02-28.at.02.28.02.mov

Or maybe I'm doing something wrong?

[RobinMalfait]

@silvenon aha, that's very odd. Let me investigate 👍

[RobinMalfait]

@silvenon figured it out, PR incoming!

[RobinMalfait]

This should be fixed by #1168, and will be available in the next release.

You can already try it using:

• npm install @headlessui/react@insiders or yarn add @headlessui/react@insiders.
• npm install @headlessui/vue@insiders or yarn add @headlessui/vue@insiders.

[silvenon]

Thank you so much, that's much better!

I find another small one, hopefully the last one, in a specific case when adding a letter which doesn't remove the currently selected item, but (re)moves some next to it. Then moving the arrow in that direction skips over the newly added ones, I think, but doesn't continue skipping, only the first move skips. It's a bit hard to define, maybe you'll understand it better. 😄

Screen.Recording.2022-02-28.at.15.17.25.mov

[RobinMalfait]

@silvenon do you mind creating a new issue for this, that will be a bit easier to keep track of things, thanks!