How to handle dropdown that opens dialog

[nirtamir2]

Hi,
I have a dropdown (and sometimes context menu) that opens dialog from it.
I wonder what is the best way to open it.
I could wrap each dropdown item in a dialog trigger like https://codesandbox.io/s/dropdownmenu-dialog-nszobq?file=/src/App.js or I can create a separate dialog without a trigger that opens with open prop and make the dropdown item onSelect setOpen(true).
What is the best practice to do it?
Also, I notice that opening the popover / dialog from the dropdown have focus implications, so when the dropdown menu closes after the user select item, the focus move to the dropdown trigger. But if selecting the dropdown item causes opening the popover (and therefore the focus should move the the first popover selectable item), it immediately closes.
So I wonder how to handle dropdown that opens a popover / dialog.

[benoitgrelard]

Here are a couple approaches: https://codesandbox.io/s/dropdownmenu-dialog-items-r9sq1q

[lihebi]

Here's my simple solution:

import { Button, Dialog, DropdownMenu, Flex } from "@radix-ui/themes";
import { useRef } from "react";

// The app
function App() {
  return <OuterDropDown />;
}

// The outer DropDown Component
function OuterDropDown() {
  return (
    <DropdownMenu.Root>
      <DropdownMenu.Trigger>
        <Button variant="soft">
          Options
          <DropdownMenu.TriggerIcon />
        </Button>
      </DropdownMenu.Trigger>
      <DropdownMenu.Content>
        <DropdownMenu.Item shortcut="⌘ E">Regular Item</DropdownMenu.Item>
        <InnerDialog />
      </DropdownMenu.Content>
    </DropdownMenu.Root>
  );
}

// The inner Dialog component.
function InnerDialog() {
  const ref = useRef<HTMLButtonElement>(null);
  return (
    <Dialog.Root>
      <DropdownMenu.Item
        shortcut="⌘ E"
        onClick={(e) => {
          // ===========
          // Trick 1: this will trigger opening the dialog without closing the dropdown menu.
          e.preventDefault();
          ref?.current?.click();
        }}
      >
        <div>
          <Dialog.Trigger ref={ref}>
            <div></div>
          </Dialog.Trigger>
          Dialog Item
        </div>
      </DropdownMenu.Item>

      <Dialog.Content maxWidth="450px">
        <Dialog.Title>Edit profile</Dialog.Title>
        <Dialog.Description size="2" mb="4">
          Make changes to your profile.
        </Dialog.Description>

        <Flex gap="3" mt="4" justify="end">
          <Dialog.Close>
            <DropdownMenu.Item>
              <Button variant="soft" color="gray">
                Cancel
              </Button>
            </DropdownMenu.Item>
          </Dialog.Close>
          <Dialog.Close>
            {/* ===========
                 Trick 2: This will trigger the close of Dropdown Menu. */}
            <DropdownMenu.Item>Save</DropdownMenu.Item>
          </Dialog.Close>
        </Flex>
      </Dialog.Content>
    </Dialog.Root>
  );
}

[nirtamir2]

Nice 👍
Thank you @lihebi

[alekseykurylev]

@benoitgrelard your example does not work in "Radix Theme" radix-ui/themes#611 Please look at this problem.