headlessui icon indicating copy to clipboard operation
headlessui copied to clipboard

Listbox not checking index access on GoToOption action

Open themagickoala opened this issue 1 year ago • 2 comments

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.

themagickoala avatar Oct 10 '24 08:10 themagickoala