Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Anchor elements with preventDefault as Tabs #3155

Open
lenzls opened this issue Apr 30, 2024 · 0 comments
Open

Anchor elements with preventDefault as Tabs #3155

lenzls opened this issue Apr 30, 2024 · 0 comments

Comments

@lenzls
Copy link

lenzls commented Apr 30, 2024

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant