[Dialog|Popover] - Focusing the `Trigger` on Clicking Outside

[tevass]

Feature request

A few days ago, while exploring the components of ShadcnUI, I noticed that the Dialog and Popover components do not return focus to the trigger when clicking outside their context.

Overview

Modify the Dialog and Popover components in Radix so that the trigger button receives focus when a click occurs outside the context of these components. This functionality is already present in the Select and DropdownMenu components, which use the onPointerDown event to return focus to the trigger.

Benefits:

• Consistency: Align the behavior of the Dialog and Popover components with that of the Select and DropdownMenu components.
• Accessibility: Facilitate navigation for users who rely on keyboards, clearly indicating where the focus is through the focus ring (:focus-visible).
• User Experience: Improve usability by ensuring that the focus returns to the trigger button, allowing users to know exactly where the focus is after interactions.

This change will promote a more cohesive and accessible user experience while maintaining consistency among the components of the library.

[vladmoroz]

Dialog and Popover clearly do focus triggers on outside clicks. I'm going to close the issue unless there are other details to reproduce it.

https://github.com/radix-ui/primitives/assets/8441036/98e9d80e-9a8d-43da-920f-9c2c7b7a8753

[tevass]

I'm sorry @vladmoroz, I believe I misspoke when I said that the trigger button does not receive focus. The trigger does receive focus when clicking outside the component.

What I really want to point out is that Shadcn/UI uses :focus-visible to style button focuses. This does not work in Dialogand Popover, but it does work in Select and Dropdown, as they use the onPointerDown event instead of onClick.

https://github.com/radix-ui/primitives/assets/57420660/847b4d29-9450-49d6-918d-a910828cad89

[vladmoroz]

What I really want to point out is that Shadcn/UI uses :focus-visible to style button focuses. This does not work in Dialog and Popover

You are clicking out with a mouse on your screen recording. :focus-visible styles are supposed to be displayed on keyboard interaction, not mouse interaction.

shadcn's Select component uses plain :focus style, which is why you are seeing the focus outline every time.

Anyway, I think you want to take it to the shadcn repo if your request is related to styling

[tevass]

Ok, thanks so much!