Dialog doesn't restore focus to the trigger button on Safari

[diegohaz]

What package within Headless UI are you using?

@headlessui/react, @headlessui/vue

What version of that package are you using?

latest on the site

What browser are you using?

Safari

Reproduction URL

https://headlessui.com/react/dialog

Describe your issue

1. Open https://headlessui.com/react/dialog on Safari
2. Close the dialog in the preview
3. Click on the "Open dialog" button
4. Press Esc
5. Press Enter

Notice that the Dialog doesn't open again as it does on other browsers because the focus is not restored to the "Open dialog" button.

I believe this happens because Headless UI may be relying on buttons receiving focus when they get clicked to restore it when the dialog closes, but Safari doesn't focus on buttons on mouse down.

[juliantroeps]

@diegohaz @RobinMalfait I think this is by design from Apple. I cannot tab focus anywhere on any site if I don't allow it from Safari settings. See: https://www.scottohara.me/blog/2014/10/03/link-tabbing-firefox-osx.html#make-sure-safari-is-appropriately-setup-too

[diegohaz]

@juliantroeps That's not the same thing. That macOS option allows tabbing through links. Tabbing through buttons and other tabbable elements works as expected, even when that option is unchecked. The issue here is that Safari doesn't focus on buttons on mouse down, not when tabbing.

[Xiaobei-QuQ]

windows chrome version v72.0.3626.81 experiencing the same problem

[Xiaobei-QuQ]

windows chrome version v72.0.3626.81 experiencing the same problem

[RobinMalfait]

Hey, thank you for this bug report! 🙏

This should be fixed by #2326, and will be available in the next release.

You can already try it using:

• npm install @headlessui/react@insiders.
• npm install @headlessui/vue@insiders.