headlessui icon indicating copy to clipboard operation
headlessui copied to clipboard

Anchor elements with preventDefault as Tabs

Open lenzls opened this issue 1 year ago • 0 comments

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

For example: 1.7.17

What browser are you using?

Firefox

Reproduction URL

https://codesandbox.io/p/devbox/hui-tabs-preventdefault-nmr95x

Describe your issue

I want to use anchor tags as Tabs in my application, since they actually point to a sensible URL. But I don't want them to actually redirect the page. In order to do that I added a e.preventDefault() click handler to the anchor tags.

In my mind this should prevent the redirect of the anchor tags, while still allowing the click event to bubble so that it can get handled appropriately by headless-ui.

In practise though, the click event prevents the redirect, but also leads to no tab change at all. Via keyboard controls, the tabs still work.

lenzls avatar Apr 30 '24 15:04 lenzls