a/button tag not working inside Listbox.Option

[schultzp2020]

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

v1.6.4

What browser are you using?

N/A

Reproduction URL

Reproduction URL
Specifically VersionSelector in _app.tsx

Describe your issue

The Listbox does not navigate correctly when using a Link tag from Next.js or a regular anchor tag inside of Listbox.Option. After investigating, I have found the href does not fire off every time. Further testing showed if I were to change the Link/a tag to a button tag with an onClick attribute, the onClick function has the same issues an an href.

[adamwathan]

Hey! I think you're using the wrong component here, a Listbox is a form control (like a stylable <select>). You would never put a button or link inside of a native <select> element.

Check out the <Menu> or <Popover> components for this sort of thing instead:

https://headlessui.com/react/menu
https://headlessui.com/react/popover

[schultzp2020]

Ah, gotcha that makes sense. @adamwathan what's the reason behind using <Listbox> instead of lets say <Menu> for <ThemeSelector> in the TailwindUI Syntax template?

[schultzp2020]

@adamwathan I updated <VersionSelector> to use <Menu> instead of <Listbox> and it still does not work 100% of the time. I updated the test repo to reflect my changes.

[schultzp2020]

If I set as={Link} in <Menu.Item> this fixes the issue. However, this seems like it should not be needed.