[DropdownMenu Trigger] Handle focus styles between click and keydown events

[binhxn]

Hello 👋 ,

I was wondering if it's possible to control the focus-state styles between click and keydown events, similar to the focus-visible pseduo-class?

For example, I'd like to remove focus styles on DropdownMenu.Trigger regardless of any click events.

However, I want the focus styles to appear on the DropdownMenu.Trigger when I use keydown events (e.g. tab onto Trigger to display focus styles or close the menu to re-focus onto Trigger). I tried using onCloseAutoFocus but that seems always remove focus state.

Would love to hear your thoughts on how to go about this!

[joaom00]

Hi @binhxn,

You can use the :focus and :focus-visible pseudo classes on DropdownMenu.Trigger.

[binhxn]

Hi @joaom00,

That doesn't seem to work when I tried it. Here's a Codesandbox repro

I applied the :focus-visble styles on both the:

1. DropdownMenu.Trigger
2. Child component through asChild props

but the trigger still retains the focus-ring regardless of any click event. Any thoughts on this?

[benoitgrelard]

It does work, the issue is that the focus restoration is programatic and browsers usually will treat this as a visible focus from the POV of :focus-visible. Unfortunately the browser doesn't offer any API for us to hint at what we'd want to achieve based on the action.

[binhxn]

You're right, I misunderstood. It looks like the best option for me is to use onCloseAutoFocus to prevent focus rings in the way that I need. Thank you for the clarification!