search

radix-ui / primitives

Radix Primitives is an open-source UI component library for building high-quality, accessible design systems and web apps. Maintained by @workos.
https://radix-ui.com/primitives
MIT License
14.82k stars 718 forks source link

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

Closed tevass closed 3 weeks ago

tevass commented 3 weeks ago

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:

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

vladmoroz commented 3 weeks ago

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 commented 2 weeks ago

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 commented 2 weeks ago

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 commented 1 week ago

Ok, thanks so much!