How to combine DropdownMenu.Item and RadixDialog.Trigger

[gopeter]

I want to build a dropdown with items that open a dialog – but obviously these are two different types of buttons. I mainly want to use a RadixDialog.Trigger to make use of the focus management: closing the dialog should re-focus the DropdownMenu.Item (which opened the dialog). Is there any clever way to build this with Radix's components or do I have to care about the focus by myself in this case? 🤔

[joaom00]

Is what you are looking for? https://codesandbox.io/s/bold-haibt-ubu3my?file=/App.js

[gopeter]

Yes, thanks a lot!

[adatti]

@joaom00 I have a similar problem, but I want the dropdown menu to disappear before the dialog appears (i.e. closing the dialog shouldn't refocus on the dropdown, since the dropdown is already gone).

Would this require managing things manually? E.g. having a dropdown with no trigger and other bad stuff?

[joaom00]

@adatti Do some of these examples help?

[adatti]

@joaom00 they do, thanks a lot

[benoitgrelard]

More examples here: https://codesandbox.io/s/dropdownmenu-dialog-items-r9sq1q

[andy-hook]

closing the dialog should re-focus the DropdownMenu.Item (which opened the dialog). Is there any clever way to build this with Radix's components or do I have to care about the focus by myself in this case?

You can compose the Dialog.Trigger with a DropdownMenu.Item via asChild, though take care to return focus to the dropdown trigger manually if there is some type of confirmation action in the dialog that also closes the dropdown.

Some additional examples

[gopeter]

Thanks, this also helps a lot! :)