Unexpected focus-visible state on popover-like components close

[YaredFall]

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

previews on official headlessui website / v1.7.17

What browser are you using?

For example: Chrome v119

Reproduction URL

https://headlessui.com/react/dialog
https://headlessui.com/react/popover
https://headlessui.com/react/listbox
https://headlessui.com/react/menu

Describe your issue

When you open a dialog or a popover, then use Tab key to navigate inside the popover and then click with mouse to close it, for some reason trigger button gets :focus-visible state and therefore outline appears.
Similar effect can be achieved if you use keyboard to focus trigger button and open the dialog/popover/listbox/menu, then clicking with mouse to close. In case of dialog, popover and menu components the trigger button loses focus for a moment and retrieves it back again a moment after.
By the way, popover/listbox/menu components (except dialog, strangely enough) in the preview sections behave similarly, when being closed with mouse click after auto opening (when you open components page).

[adamwathan]

Hey! So the underlying issue here is that Headless UI has to imperatively trigger focus in a lot of situations, which often trips the native browser focus-visible heuristics causing focus styles to appear even when using the mouse.

The solution is to rely on the data-headlessui-focus-visible attribute we add instead, which Headless UI manages for you and only adds when the user is truly using the keyboard:

#2347

[YaredFall]

So, if anyone still curious about how to fix the issue.
I needed to use

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

to get rid of the problem.