focus-visible on tab is triggered on first click after page load

[PutziSan]

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

1. Press the sandbox internal refresh button
2. Press one of the tabs

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): https://github.com/w3c/csswg-drafts/issues/5885

[adamwathan]

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:

<Tab className="ui-focus-visible:bg-blue-500"Tab 1</Tab>

Check out this PR for more details: https://github.com/tailwindlabs/headlessui/pull/2347