You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Hey! This is unfortunately unavoidable, we have to do a lot of programmatic focusing in Headless UI and the browser triggers focus-visible even when we wish it wouldn't.
Our recommended solution is to use the @headlessui/tailwindcss plugin and the ui-focus-visible variant instead, which relies on the presence of a data attribute that we fully control:
What package within Headless UI are you using?
@headlessui/react
What version of that package are you using?
For example: 1.7.14
What browser are you using?
Chrome
Reproduction URL
https://codesandbox.io/p/devbox/wizardly-ellis-gdt2yz?workspaceId=e9e97430-4fba-4d6b-bb93-e45d36d9e0b8
Describe your issue
Expected Result: They should not get focus-visible (in my case blue background caused by
<Tab className="focus-visible:bg-blue-500">Tab 1</Tab>
)Actual Result: Tab will get a blue background
After clicking around a bit at some point it will stop to activate the focus-visible state when clicking on the tab.
This could be part of this browser-bug (or expected behaviour? whatever): w3c/csswg-drafts#5885
The text was updated successfully, but these errors were encountered: