Popover still enables :focus-visible state in v1.7.15

[mengxi-ream]

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

v1.7.15

What browser are you using?

Safari, Chrome

Reproduction URL

https://stackblitz.com/edit/nextjs-nexl9h?file=README.md

Describe your issue

When click Popover Button using mouse, it still show the outline which should only be shown when using keyboard tab. This issue was mentioned here #1694 , and the PR has been merged #2347 in v1.7.14.

But I still met the same problem when I was using v1.7.15. (See previous reproduction URL)

[RobinMalfait]

Hey, thank you for this bug report! 🙏

Yep there is a tiny bit more work involved. The problem is that this is default browser behaviour that we can't really change. The moment you programmatically focused something, the browser will show an outline and there is nothing we can do about that part (yet).

However, what we can do (and what we introduced in that PR) is a custom data attribute that we set on the html when an item has a visual focus or not. This way you can style your elements given this additional knowledge.

We also made it a bit easier if you use our @headlessui/tailwindcss plugin (but this requires Tailwind v3, looks like you are using v2) by introducing a custom variant (ui-focus-visible) that makes use of this data attribute.

It also looks like you are using Tailwind CSS v2, so we can update your existing selector to make use of this data attribute manually instead:

- *:focus:not(:focus-visible) {
+ *:focus:not(:focus-visible),
+ html:not([data-headlessui-focus-visible]) *:focus {
    outline: none !important;
  }

I've updated your StackBlitz to see this in action: https://stackblitz.com/edit/nextjs-oiv43d?file=styles%2Fglobals.css

Hope this helps!

[mengxi-ream]

Hey, thank you for this bug report! 🙏

Yep there is a tiny bit more work involved. The problem is that this is default browser behaviour that we can't really change. The moment you programmatically focused something, the browser will show an outline and there is nothing we can do about that part (yet).

However, what we can do (and what we introduced in that PR) is a custom data attribute that we set on the html when an item has a visual focus or not. This way you can style your elements given this additional knowledge.

We also made it a bit easier if you use our @headlessui/tailwindcss plugin (but this requires Tailwind v3, looks like you are using v2) by introducing a custom variant (ui-focus-visible) that makes use of this data attribute.

It also looks like you are using Tailwind CSS v2, so we can update your existing selector to make use of this data attribute manually instead:

- *:focus:not(:focus-visible) {
+ *:focus:not(:focus-visible),
+ html:not([data-headlessui-focus-visible]) *:focus {
    outline: none !important;
  }

I've updated your StackBlitz to see this in action: https://stackblitz.com/edit/nextjs-oiv43d?file=styles%2Fglobals.css

Hope this helps!

Thank you @RobinMalfait , Your CSS code solved my problem!

But I still have a question, when I use TailwindCSS 3, if I use

<button class="ui-focus-visible:ring-2 ui-focus-visible:ring-offset-2 focus:outline-none">
  My Button
</button>

Then keyboard tab cannot get visible outline. I reproduced it here: https://stackblitz.com/edit/nextjs-3keep4?file=package.json,styles%2Fglobals.css,pages%2Findex.js

Is there anything I did wrong?

[goodroot]

This is still an issue in Tailwind 3.