Is it possible to open a Dialog with a DropdownMenu Trigger?

[g1na1011]

Hi there! I've been trying to tackle this without much luck but is it possible to wrap a DropdownMenu within the DialogContent?

I've seen examples around here where we can have a dropdown menu item open up a dialog (#1830), but what if we just want to have a trigger that opens up a dialog that contains the dropdown menu selections already? Basically, we wanted the dialog to render when we are in mobile view but I wasn't able to adjust the styling of the DropdownMenu component to take over the entire screen when this happens (re: #796).

Was trying to do something like below but nothing opens, is it because DropdownMenu always needs a trigger? Thank you so much for your help!

<Dialog.Root onOpenChange={handleDialog} open={isOpen}>
          <Dialog.Trigger asChild>
            <button type="button">click me</button>
          </Dialog.Trigger>
          <Dialog.Portal>
            <Dialog.Overlay className={styles.dialogOverlay} />
            <Dialog.Content className={styles.dialogContent}>
              <DropdownMenuPrimitive.Root>
                <DropdownContent>
                  /// Radio button menu items here
                </DropdownContent>
              </DropdownMenuPrimitive.Root>
            </Dialog.Content>
          </Dialog.Portal>
        </Dialog.Root>

[benoitgrelard]

Yeah you don't want to be mixing patterns like this. There is no built-in way at the moment to avoid the built-in positioning of DropdownMenu.Content next to DropdownMenu.Trigger. Although you could try to mess around with the wrapper styles in CSS somehow ([data-radix-popper-content-wrapper]).

[g1na1011]

Thanks for confirming @benoitgrelard! I will go ahead and work with just a Dialog for our situation then.