Listbox not checking index access on GoToOption action

[themagickoala]

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

v2.1.9

What browser are you using?

Vitest (vitest-dom v0.1.1)

Reproduction URL

I've not been able to reproduce my issue in a minimal reproduction outside of my project. Moreover, I can't even reproduce it in a browser, it's only happening in my tests. I'm not sure exactly why it's happening, but I know if I tweak this one section in the listbox.js file, it fixes my issue.

Describe your issue

When running a certain component in my Vitest tests with React Testing Library, listbox.js is throwing an error stating Cannot read property of undefined (reading 'id'). This is thrown from https://github.com/tailwindlabs/headlessui/blob/main/packages/%40headlessui-react/src/components/listbox/listbox.tsx#L1229, but I believe the cause to be https://github.com/tailwindlabs/headlessui/blob/main/packages/%40headlessui-react/src/components/listbox/listbox.tsx#L243 - this is the one line of code in the file where findIndex is called without explicitly checking whether the found index is equal to -1.

As I'm not familiar enough with the codebase, I'm not comfortable submitting a PR here as I don't know what the intended behaviour is. However, if I add a check for -1 at either of the lines linked above, my tests pass just fine.

[RobinMalfait]

Hey! Can you somehow share the test that is failing?

While checking for -1 is not a bad idea, I also would like to understand in what scenario this can happen.

The only reasons it can happen in the code is if we internally call goToOption (which is triggered when an option is being focused or an enter or mousemove event was fired on an option) with an id (coming from the option) that somehow doesn't exist in the list of options anymore the moment we actually dispatch the action.

We do have an optimization where if you let's say hover over a lot of options, then we debounce this action and only go to the last option you hovered over.

So the only thing I can think of is that the code in your test is adding/removing items (rapidly) while you are hovering or something similar.