Dialog.Trigger does not work if trigger is Dropdown.Item #1836

KevinMusgrave · 2022-12-15T01:52:48Z

Bug report

Current Behavior

A dropdown menu consists of several Dropdown.Item components. If I pass one of these Item components to a Dialog.Trigger, it does not open the dialog on click. If I pass plain text to the Dialog.Trigger, then it works.

Expected behavior

I expect Dropdown.Item to be a valid Dialog.Trigger.

Reproducible example

https://codesandbox.io/s/shy-hill-5ymyp0?file=/src/App.js

Your environment

See sandbox for package versions.

The text was updated successfully, but these errors were encountered:

KevinMusgrave · 2022-12-15T05:22:01Z

Wrapping Dropdown with Dialog fixes this:

      <Dialog.Root>
        <DropdownMenu.Root>
          <DropdownMenu.Trigger>Dropdown Menu</DropdownMenu.Trigger>
          <DropdownMenu.Portal>
            <DropdownMenu.Content>
              <Dialog.Trigger>
                <DropdownMenu.Item>"Test"</DropdownMenu.Item>
              </Dialog.Trigger>
            </DropdownMenu.Content>
          </DropdownMenu.Portal>
        </DropdownMenu.Root>
        <Dialog.Portal>
          <Dialog.Overlay className="DialogOverlay" />
          <Dialog.Content className="DialogContent">
            This is a modal.
          </Dialog.Content>
        </Dialog.Portal>
      </Dialog.Root>

monokizsolt · 2023-02-16T18:03:50Z

Hello,

Is there a way to have multiple Dropdown.Item components each with their own Dialog? With your solution only 1 dialog can be opened.

Thanks

KevinMusgrave · 2023-02-16T18:57:54Z

make each dropdown item set some state on click
pass that state into your dialog component.
render different content inside the dialog component depending on the state

But if you mean open multiple dialogs at the same time, then I don't know.

joaom00 · 2023-02-16T19:22:14Z

Hi @monokizsolt, here some examples that can help

https://codesandbox.io/embed/r9sq1q

monokizsolt · 2023-02-16T19:49:14Z

Perfect, thank you!

MarkShawn2020 · 2023-02-22T17:23:29Z

Thank you ! A clean and nice solution !

DottChen · 2023-02-22T17:31:48Z

Thank you!

Kynno · 2023-05-15T10:33:34Z

For anyone who are still having issue with this, I fixed it by using modal={false} on my DropdownMenu.Root component.

I tried the solution in the sandbox link but I was unable to use it in my code, not sure why. However this modal setting did the trick for me.

Hope it helps!

AlamMena · 2023-05-22T00:40:59Z

@Kynno Could you bring us more details? maybe an example

benoitgrelard · 2023-05-22T07:31:01Z

@AlamMena, here is the correct way to handle composition of Dialog and DropdownMenu: https://codesandbox.io/s/dropdownmenu-dialog-items-r9sq1q

AlamMena · 2023-05-22T21:56:11Z

@benoitgrelard Yes, I saw that, but I noticed that the dropmenu doesn't close after the dialog opens.

benoitgrelard · 2023-05-22T22:17:57Z

It depends on which approach, the sandbox shows 2 different approaches. The first one keeps it open (easier to implement), the second closes it (a bit more work to manage focus correctly).

0xpolarzero · 2023-06-05T14:20:01Z

For anyone who are still having issue with this, I fixed it by using modal={false} on my DropdownMenu.Root component.

I tried the solution in the sandbox link but I was unable to use it in my code, not sure why. However this modal setting did the trick for me.

Hope it helps!

I had an issue where the dialog would open, but then I could not click anything after it was closed. And it would trigger a repetitive Uncaught InternalError: too much recursion error.

This simple solution fixed it. Thanks!

aaronoceanx · 2023-07-28T04:29:47Z

@Kynno i tried the solution in the sandbox and it didnt work either , i also tried modal={false} and it did not help, super lost. Are you able to share what you did that got it working ?

luneShaoGM · 2023-08-11T07:46:39Z

I prevented the default event in the onSelect event of DropdownMenuItem, so the Dialog can be opened now. The code is as follows:

<DropdownMenu>
  <DropdownMenuTrigger> Dropdown Menu </DropdownMenuTrigger>
  <DropdownMenuContent>
    <Dialog>
      <DialogTrigger asChild>
        <DropdownMenuItem onSelect={(e) => e.preventDefault()}>
          Test
        </DropdownMenuItem>
      </DialogTrigger>
      <DialogContent>
        This is a modal.
      </DialogContent>
    </Dialog>
  </DropdownMenuContent>
</DropdownMenu>

soulbliss · 2023-08-19T22:05:21Z

If anyone has come here from shadcn/ui dialog notes and wondering how to show different dialogs for different menu items

<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button variant="ghost" className="h-8 w-8 p-0">
      <span className="sr-only">Open menu</span>
      <MoreHorizontal className="h-4 w-4" />
    </Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent align="end">
    <DropdownMenuLabel>Actions</DropdownMenuLabel>
    <Dialog>
      <DialogTrigger>
        <DropdownMenuItem onSelect={(e) => e.preventDefault()}>
          Update item
        </DropdownMenuItem>
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Update form</DialogTitle>
          <DialogDescription>
            Here you can add fields to update your form
          </DialogDescription>
        </DialogHeader>
      </DialogContent>
    </Dialog>
    <DropdownMenuSeparator />
    <Dialog>
      <DialogTrigger>
        <DropdownMenuItem onSelect={(e) => e.preventDefault()}>
          Delete item
        </DropdownMenuItem>
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Are you sure absolutely sure?</DialogTitle>
          <DialogDescription>
            This action cannot be undone. This will permanently delete
            your account and remove your data from our servers.
          </DialogDescription>
        </DialogHeader>
      </DialogContent>
    </Dialog>
  </DropdownMenuContent>
</DropdownMenu>

Malin88 · 2023-08-21T15:46:07Z

If anyone has come here from shadcn/ui dialog notes and wondering how to show different dialogs for different menu items
....

But the expanded menu after opening Dialog does not hide, is there any solution for this?

soulbliss · 2023-08-22T11:39:45Z

@Malin88 I have been using this so far, works for me.
Found this here from shadcn/ui issues
Example:


const [open, setOpen] = useState(false);

return <Dialog open={open} onOpenChange={setOpen} />

VesperQuartz · 2023-09-02T23:27:56Z

If anyone has come here from shadcn/ui dialog notes and wondering how to show different dialogs for different menu items
....

But the expanded menu after opening Dialog does not hide, is there any solution for this?

Did you find the answer to this? same thing happening here

mohamedamara1 · 2023-09-09T10:05:26Z

If anyone has come here from shadcn/ui dialog notes and wondering how to show different dialogs for different menu items

<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button variant="ghost" className="h-8 w-8 p-0">
      <span className="sr-only">Open menu</span>
      <MoreHorizontal className="h-4 w-4" />
    </Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent align="end">
    <DropdownMenuLabel>Actions</DropdownMenuLabel>
    <Dialog>
      <DialogTrigger>
        <DropdownMenuItem onSelect={(e) => e.preventDefault()}>
          Update item
        </DropdownMenuItem>
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Update form</DialogTitle>
          <DialogDescription>
            Here you can add fields to update your form
          </DialogDescription>
        </DialogHeader>
      </DialogContent>
    </Dialog>
    <DropdownMenuSeparator />
    <Dialog>
      <DialogTrigger>
        <DropdownMenuItem onSelect={(e) => e.preventDefault()}>
          Delete item
        </DropdownMenuItem>
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Are you sure absolutely sure?</DialogTitle>
          <DialogDescription>
            This action cannot be undone. This will permanently delete
            your account and remove your data from our servers.
          </DialogDescription>
        </DialogHeader>
      </DialogContent>
    </Dialog>
  </DropdownMenuContent>
</DropdownMenu>

Brilliant! thank you

EliasOlie · 2023-09-12T17:48:32Z

If anyone has come here from shadcn/ui dialog notes and wondering how to show different dialogs for different menu items

<DropdownMenu>
  <DropdownMenuTrigger asChild>
    <Button variant="ghost" className="h-8 w-8 p-0">
      <span className="sr-only">Open menu</span>
      <MoreHorizontal className="h-4 w-4" />
    </Button>
  </DropdownMenuTrigger>
  <DropdownMenuContent align="end">
    <DropdownMenuLabel>Actions</DropdownMenuLabel>
    <Dialog>
      <DialogTrigger>
        <DropdownMenuItem onSelect={(e) => e.preventDefault()}>
          Update item
        </DropdownMenuItem>
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Update form</DialogTitle>
          <DialogDescription>
            Here you can add fields to update your form
          </DialogDescription>
        </DialogHeader>
      </DialogContent>
    </Dialog>
    <DropdownMenuSeparator />
    <Dialog>
      <DialogTrigger>
        <DropdownMenuItem onSelect={(e) => e.preventDefault()}>
          Delete item
        </DropdownMenuItem>
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Are you sure absolutely sure?</DialogTitle>
          <DialogDescription>
            This action cannot be undone. This will permanently delete
            your account and remove your data from our servers.
          </DialogDescription>
        </DialogHeader>
      </DialogContent>
    </Dialog>
  </DropdownMenuContent>
</DropdownMenu>

Brilliant! thank you

I am using a form, and inside it, the inputs are behaving unexpectedly. When I select one input and change its value, the input content gets automatically selected when I move the cursor

coded58 · 2023-09-13T08:16:18Z

same issue but mine is with a popover, i have a form (in a modal dialog) and when user opens the date-picker which uses the popover, the popover closes when i hover on it even before selecting a date

coded58 · 2023-09-13T08:23:06Z

copy.mp4

this above behavior

coded58 · 2023-09-13T08:55:11Z

copy.mp4
this above behavior

solved this by creating a replica popover component without the portal as both the dialog and popover from shadcn were using the body element

piotrkulpinski · 2023-09-22T21:11:13Z

I prevented the default event in the onSelect event of DropdownMenuItem, so the Dialog can be opened now. The code is as follows:

<DropdownMenu>
  <DropdownMenuTrigger> Dropdown Menu </DropdownMenuTrigger>
  <DropdownMenuContent>
    <Dialog>
      <DialogTrigger asChild>
        <DropdownMenuItem onSelect={(e) => e.preventDefault()}>
          Test
        </DropdownMenuItem>
      </DialogTrigger>
      <DialogContent>
        This is a modal.
      </DialogContent>
    </Dialog>
  </DropdownMenuContent>
</DropdownMenu>

This solution is great, but it does not close the dropdown element, as clicking on the Dropdown Item would normally do.
Is there any way to keep that functionality while also allowing to open the Dialog?

dooart · 2023-09-28T17:53:10Z

@piotrkulpinski i solved this by making both the Dialog and DropdownMenu controlled. then when the dialog closes, i manually close the dropdown menu

here's an example:

function ItemTableRow({ item, onItemUpdated }: { item: Item; onItemUpdated: () => void }) {
  const [isMenuOpen, setIsMenuOpen] = useState(false);

  return (
    <DropdownMenu open={isMenuOpen} onOpenChange={(isOpen) => setIsMenuOpen(isOpen)}>
      <DropdownMenuTrigger asChild>
        <Button variant="ghost" className="h-8 w-8 p-0">
          <span className="sr-only">Open menu</span>
          <MoreHorizontal className="h-4 w-4" />
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end">
        {/* EditItemDialog is just an abstraction around Dialog - onClose is a custom thing */}
        <EditItemDialog
          item={item}
          onItemSaved={onItemUpdated}
          onClose={() => setIsMenuOpen(false)}
        >
          <DropdownMenuItem
            onSelect={(e) => {
              e.preventDefault();
            }}
          >
            <Edit className="h-4 w-4 mr-2" />
            Edit
          </DropdownMenuItem>
        </EditItemDialog>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

it's a bit wonky, but it works

DylanTse520 · 2024-06-19T23:58:16Z

Has anyone tried to combine the Dialog and Drawer components to create a responsive dialog, while still nesting them in a dropdown item? I can't use state because I'm using the dropdown item in the table. What I do is to create three abstractions for the wrapper, the trigger and the content, that just return either <Dialog> or <Drawer> based on media query. Not sure if there's a better way...

"use client";

import { useMediaQuery } from "@hooks/use-media-query";

import { Dialog, DialogTrigger } from "@components/ui/dialog";
import { Drawer, DrawerTrigger } from "@components/ui/drawer";

const ResponsiveModal = ({
  isOpen,
  setIsOpen,
  children,
}: {
  isOpen?: boolean;
  setIsOpen?: (isOpen: boolean) => void;
  children: React.ReactNode;
}) => {
  const isDesktop = useMediaQuery("(min-width: 640px)");

  if (isDesktop) {
    return (
      <Dialog open={isOpen} onOpenChange={setIsOpen}>
        {children}
      </Dialog>
    );
  } else {
    return (
      <Drawer open={isOpen} onOpenChange={setIsOpen}>
        {children}
      </Drawer>
    );
  }
};

const ResponsiveModalTrigger = ({
  asChild,
  children,
}: {
  asChild?: boolean;
  children: React.ReactNode;
}) => {
  const isDesktop = useMediaQuery("(min-width: 640px)");

  if (isDesktop) {
    return <DialogTrigger asChild={asChild}>{children}</DialogTrigger>;
  } else {
    return <DrawerTrigger asChild={asChild}>{children}</DrawerTrigger>;
  }
};

export { ResponsiveModal, ResponsiveModalTrigger };

msruan · 2024-06-20T14:06:10Z

I went with a different approach for this. Create a dialog as normal, and then put some hidden div as a trigger with a ref:
const triggerRef = useRef<HTMLDivElement>(null);

...

<Dialog.Root>

  <Dialog.Trigger>
    <div className='hidden' ref={triggerRef} />
  <Dialog.Trigger />

  ...

</Dialog.Root>
Then send a click event to this div on the onSelect event of the DropdownMenu.Item:
<DropdownMenu.Root>

  ...

  <DropdownMenu.Item onSelect={() => {
    triggerRef.current?.click();
  }}>

</DropdownMenu.Root>

YOU DID IT!!!!
LOVE U BRO

kamyarkaviani · 2024-06-28T20:27:28Z

YOU DID IT!!!! LOVE U BRO

Thanks, but I have to say this is not really ideal. What I've done is imperative and not congruent with React's declarative paradigm. It would be more ideal to instead wrap the dropdown menu inside of one big dialog component with multiple triggers, and change the content of the dialog depending on which item was selected (which you can track with a state). But since I already had the dialogs built out, this was a quick workaround.

dancork · 2024-07-01T16:02:11Z

I went with a different approach for this. Create a dialog as normal, and then put some hidden div as a trigger with a ref:
const triggerRef = useRef<HTMLDivElement>(null);

...

<Dialog.Root>

  <Dialog.Trigger>
    <div className='hidden' ref={triggerRef} />
  <Dialog.Trigger />

  ...

</Dialog.Root>
Then send a click event to this div on the onSelect event of the DropdownMenu.Item:
<DropdownMenu.Root>

  ...

  <DropdownMenu.Item onSelect={() => {
    triggerRef.current?.click();
  }}>

</DropdownMenu.Root>

This solution won't apply the correct aria-labels either to the dropdown menu item.

Kendaichi · 2024-07-12T02:12:18Z

@juanrgon that's clean ☺️ but just a heads up that you're breaking a11y there so if you're worried about that, i think the most relevant part is to make sure you return focus to the trigger when the dialog closes.

export function useDialog() {
  const [isOpen, setIsOpen] = useState(false);
  const triggerRef = React.useRef();
  
  function trigger() {
    setIsOpen(true);
  }

  function dismiss() {
    setIsOpen(false);
    triggerRef.current?.focus();
  }

  return {
    triggerProps: {
      ref: triggerRef,
      onClick: trigger,
    },
    dialogProps: {
      open: isOpen,
      onOpenChange: open => {
        if (open) trigger();
        else dismiss();
      },
    },
    trigger,
    dismiss,
  };
}

import { Dialog, DialogContent } from "@radix-ui/react-dialog";
import { useDialog } from "@/components/ui/use-dialog.tsx"

function MyComponent() {
  const infoDialog = useDialog();
  return (
    <>
      <button {...infoDialog.triggerProps}>Launch the info dialog</button>
      <Dialog {...infoDialog.dialogProps}>
        <DialogContent> Info </DialogContent>
      </Dialog>
    </>
  );
}

this is why radix usually recommends using the parts they provide instead of doing your own thing, because we can't know for sure what a11y support we're losing by breaking away from them.

Hey! Good day, what if the dialog is inside a looping function. I am trying to display a table, and each corresponding row have a edit button. What arises with using this hook is that multiple dialogs are being rendered, suppose I have 3 rows of data, and I click edit on one of them, 3 dialogs will also be rendered. Sorry for disturbing, I am just trying to learn.

juanrgon · 2024-07-12T02:25:12Z

@Kendaichi My guess would be that you're reusing the same useDialog trigger on each of your edit buttons. Each edit button will need its own useDialog call, so you may want to create a child component for your edit button to make this simpler:

function Table() {
  return {rows.map(r => <tr><Edit/></tr>)}
}

function Edit() {
  const dialog = useDialog();
  return <>
      <button {...dialog.triggerProps}>Edit</button>
      <Dialog {...dialog.dialogProps}>
        <DialogContent> Edit </DialogContent>
      </Dialog>
  </>
}

tsleblanc · 2024-07-18T08:11:21Z

Similar to some previous answers, but using a more generic hook.

// @/hooks/use-show-hide.js
import { useState } from 'react';

export const useShowHide = (defaultVisible = false) => {
  const [visible, setVisible] = useState(defaultVisible);

  const show = () => setVisible(true);
  const hide = () => setVisible(false);

  const toggle = (nextVisible) => {
    if (typeof nextVisible !== 'undefined') {
      setVisible(nextVisible);
    } else {
      setVisible((previousVisible) => !previousVisible);
    }
  };

  return { hide, show, toggle, visible };
};


// dropdown-menu.jsx
import { useParams } from 'react-router-dom';
import { deletePost } from '@/api/post';
import { ConfirmDialog } from '@/components/confirm-dialog';
import { useShowHide } from '@/hooks/use-show-hide';

export function DropdownMenu() {
  const { id } = useParams();

  const deleteDialog = useShowHide();

  const handleDelete = () =>
    deletePost(id)
      .catch(() => {
        alert('Post deletion has failed.');
      })
      .then(() => {
        deleteDialog.hide();
      });

  return (
    <>
      <DropdownMenu>
        <DropdownMenuTrigger asChild>
          <MenuButton />
        </DropdownMenuTrigger>
        <DropdownMenuContent>
          <DropdownMenuItem>View details</DropdownMenuItem>
          <DropdownMenuSeparator />
          <DropdownMenuItem
            className="!text-destructive"
            onSelect={deleteDialog.show}
          >
            Delete
          </DropdownMenuItem>
        </DropdownMenuContent>
      </DropdownMenu>

      <Dialog onOpenChange={deleteDialog.toggle} open={deleteDialog.visible}>
        <DialogContent>
          <ConfirmDialog
            onSubmit={handleDelete}
            title="Are you sure to delete this post?"
          />
        </DialogContent>
      </Dialog>
    </>
  );
}

- also tried using the shadcnvue dropdown menu but decided against it due to an existing bug when nesting drawers/dialogs, radix-ui/primitives#1836

sibananda485 · 2024-08-27T08:54:41Z

modal={false}

Thanks a a lot man it solved my issue

knakmitch · 2024-10-16T12:52:05Z

I'm not a huge fan of highly nested templates, and wanted a way to remotely trigger the modal., so I created a component to remotely trigger the dialog to open. This method allows me to host ConfirmDialog outside of DropdownMenu.

// MyDropdownMenu.vue
<template>
  <DropdownMenu>
    <DropdownMenuTrigger>
      <slot>
        <IconButton icon="more-vert" />
      </slot>
    </DropdownMenuTrigger>
    <DropdownMenuContent>
      <DropdownMenuItem @click="remoteDeleteTrigger = true"> <Icon name="delete" />Delete </DropdownMenuItem>
    </DropdownMenuContent>
  </DropdownMenu>

  <ConfirmDialog
    title="Delete Thing"
    message="Are you sure you want to delete this thing?"
    @confirm="...do something"
  >
    <RemoteDialogTrigger v-model="remoteDeleteTrigger" />
  </ConfirmDialog>
</template>

<script setup lang="ts">
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import IconButton from "../ui/button/IconButton.vue";
import Icon from "../ui/icon/Icon.vue";
import ConfirmDialog from "../dialog/ConfirmDialog.vue";
import RemoteDialogTrigger from "../dialog/RemoteDialogTrigger.vue";
import { ref } from "vue";

const remoteDeleteTrigger = ref<boolean>(false);
</script>

// RemoteDialogTrigger.vue
<template>

<div ref="remote-trigger"></div>

</template>

<script lang="ts" setup>
import { useTemplateRef, watch } from "vue";

const model = defineModel<boolean>();
  const remoteTrigger = useTemplateRef<HTMLElement>('remote-trigger');

watch(model, (value) => {
  if (value) {
    remoteTrigger.value?.click();
    model.value = false;
  }
});

</script>

tariky · 2024-10-29T08:43:04Z

For anyone who are still having issue with this, I fixed it by using modal={false} on my DropdownMenu.Root component.

I tried the solution in the sandbox link but I was unable to use it in my code, not sure why. However this modal setting did the trick for me.

Hope it helps!

Thank you so much. This is right solution.

<DropdownMenu modal={false}><DialogComponentWithDropDownItemAsTrigger /></DropdownMenu>

kontyente · 2024-11-01T16:25:38Z

For those who use Vue here is a workaround with "as-child" and "@click.stop"
It works as it should.
`

    <DropdownMenuTrigger as-child>
        <Button variant="ghost" class="w-8 h-8 p-0">
            <span class="sr-only">Open menu</span>
            <MoreHorizontal class="w-4 h-4" />
        </Button>
    </DropdownMenuTrigger>
    <DropdownMenuContent align="end">
        <DropdownMenuLabel>Actions</DropdownMenuLabel>

        <DropdownMenuItem>
            <Dialog>
                <DialogTrigger as-child @click.stop>
                    <div class="flex items-center cursor-pointer">
                        <Logs class="mr-2 h-4 w-4" />
                        <span>Logs</span>
                    </div>
                </DialogTrigger>
                <DialogContent class="sm:min-w-[800px]">
                    <DialogHeader>
                        <DialogTitle>Logs</DialogTitle>
                        <DialogDescription>
                            Details about device logs.
                        </DialogDescription>
                    </DialogHeader>
                    <DialogFooter>
                        <Button @click="closeDialog">Close</Button>
                    </DialogFooter>
                </DialogContent>
            </Dialog>
        </DropdownMenuItem>
        
    </DropdownMenuContent>
</DropdownMenu>

`

MSAJAL07 · 2024-11-01T18:42:29Z

DropdownMenu

Bro! You're a lifesaver. I spent 2-3 hours trying to figure this out.

CauaYves · 2024-11-02T00:19:16Z

I resolved by wrapping the Dropdown with AlertDialog and putting the dialog trigger inside of DropDownMenuItem

			<AlertDialog>
				<AlertDialogContent>
					<AlertDialogHeader>
						<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
						<AlertDialogDescription>
							This action cannot be undone. This will permanently delete your
							account and remove your data from our servers.
						</AlertDialogDescription>
					</AlertDialogHeader>
					<AlertDialogFooter>
						<AlertDialogAction>Fechar</AlertDialogAction>
					</AlertDialogFooter>
				</AlertDialogContent>
				<div className="flex justify-end">
					<DropdownMenu modal={false}>
						<DropdownMenuTrigger asChild>
							<Button variant="ghost" className="h-8 w-8 p-0">
								<span className="sr-only">Open menu</span>
								<MoreHorizontal className="h-4 w-4" />
							</Button>
						</DropdownMenuTrigger>
						<DropdownMenuContent>
							<DropdownMenuItem onSelect={(e) => e.preventDefault()}>
								<AlertDialogTrigger 
                                                                      className="flex items-center gap-2 cursor-pointer pointer-events-auto">
									<CircleEllipsis
										size={16}
										className="text-muted-foreground"
									/>
									<P className="text-muted-foreground">Ver detalhes</P>
								</AlertDialogTrigger>
							</DropdownMenuItem>
							<DropdownMenuItem>
								<CircleX size={16} className="text-muted-foreground" />
								<P className="text-muted-foreground">Cancelar matrícula</P>
							</DropdownMenuItem>
						</DropdownMenuContent>
					</DropdownMenu>
				</div>
			</AlertDialog>

AhmedTharwat-AT · 2024-11-09T14:33:48Z

This worked for me , if you want to open multiple dialogs within a dropdown menu while closing the menu after selecting a dialog

const [openedDialog, setOpenedDialog] = useState<"delete" | "edit">();
  return (
    <Dialog>
      <DropdownMenu modal={false}>
        <DropdownMenuTrigger asChild>
          <Button variant="ghost" className="h-8 w-8 p-0">
            <span className="sr-only">Open menu</span>
            <MoreHorizontal />
          </Button>
        </DropdownMenuTrigger>
        <DropdownMenuContent align="end">
          <DialogTrigger
            asChild
            onClick={() => {
              setOpenedDialog("delete");
            }}
          >
            <DropdownMenuItem>Delete</DropdownMenuItem>
          </DialogTrigger>
          <DialogTrigger
            asChild
            onClick={() => {
              setOpenedDialog("edit");
            }}
          >
            <DropdownMenuItem>Edit</DropdownMenuItem>
          </DialogTrigger>
        </DropdownMenuContent>
      </DropdownMenu>
      <DialogContent>
        {openedDialog === "delete" ? (
          <DeletePropertyModal />
        ) : (
          <EditPropertyModal />
        )}
      </DialogContent>
    </Dialog>
  )

… causing improper opening/closing behaviour & erratic highlighting, import use-dialog from radix-ui/primitives#1836 (comment) for fix

rksahu2610 · 2025-01-08T13:13:42Z

Hello, I found a solution in the ShadCN example from the playground.

https://ui.shadcn.com/examples/playground

Screen.Recording.2025-01-08.184030.mp4

matthias · 2025-01-29T09:18:05Z

Hello, I found a solution in the ShadCN example from the playground.

https://ui.shadcn.com/examples/playground

Screen.Recording.2025-01-08.184030.mp4

This example also shows the issue / bug:

when you open the dialog "Content Filter Preferences" - and close it again - the UI freezes (doesn't accept any user inputs anymore) - the cause is because <body> still has the pointer-events: none;

<body style="pointer-events: none;">...

So still the most simple solution for me is to prevent the "scroll locking" via <DropdownMenu modal={false}> -> because this is currently not working with nested Dialogs - as they also want to "scroll lock".

As you can also see in the playground: when you open the dropdown - you can not scroll the page anymore - in my use case this feature was not needed - as the dropdown can stay open when I scroll (it will be repositioned correctly when you scroll)

juanrgon · 2025-01-30T11:15:54Z

Perhaps this issue should be locked, as the comments have largely devolved into reposts of previously suggested solutions

caturbgs · 2025-02-10T17:05:49Z

For those who use Vue here is a workaround with "as-child" and "@click.stop" It works as it should. `

    <DropdownMenuTrigger as-child>
        <Button variant="ghost" class="w-8 h-8 p-0">
            <span class="sr-only">Open menu</span>
            <MoreHorizontal class="w-4 h-4" />
        </Button>
    </DropdownMenuTrigger>
    <DropdownMenuContent align="end">
        <DropdownMenuLabel>Actions</DropdownMenuLabel>

        <DropdownMenuItem>
            <Dialog>
                <DialogTrigger as-child @click.stop>
                    <div class="flex items-center cursor-pointer">
                        <Logs class="mr-2 h-4 w-4" />
                        <span>Logs</span>
                    </div>
                </DialogTrigger>
                <DialogContent class="sm:min-w-[800px]">
                    <DialogHeader>
                        <DialogTitle>Logs</DialogTitle>
                        <DialogDescription>
                            Details about device logs.
                        </DialogDescription>
                    </DialogHeader>
                    <DialogFooter>
                        <Button @click="closeDialog">Close</Button>
                    </DialogFooter>
                </DialogContent>
            </Dialog>
        </DropdownMenuItem>
        
    </DropdownMenuContent>
</DropdownMenu>

`

doesn't work for me

- click Plus can open AddGroup Dialog - right click on each group button can open context menu - context menu can set default chosen, edit/delete and manage all the groups, so the context menu can open two different dialogs, one for EditGroup, one for ManageGroup - ManageGroup can open AddGroup and EditGroup as well - based on issue radix-ui/primitives#1836 to call multi dialog on shadcn-ui

approached this task as an opportunity to learn something new, so I decided to give ShadCN UI a try. Unfortunately, I ran into a few tricky bugs while implementing the features. I also considered using Tanstack Table and Tanstack Query, but the scale of the project was too small for that to be necessary. During the task, I encountered several bugs in ShadCN UI, such as: shadcn-ui/ui#468 radix-ui/primitives#1836 (comment) I was able to fix some of these issues, but there's still one remaining problem: after submitting the form, clicking anything becomes impossible. This seems to be related to focus management when dealing with multiple popovers. Since resolving third-party issues is outside the scope of this task, I’m leaving it as is for now. Apologies for the inconvenience! 😅

danggearment · 2025-04-03T04:59:41Z

You can resolve this issue by changing the uncontrolled dropdown menu to a controlled dropdown menu and closing the menu item when it is clicked.

erikwibowo · 2025-05-01T15:11:43Z

For anyone who are still having issue with this, I fixed it by using modal={false} on my DropdownMenu.Root component.

I tried the solution in the sandbox link but I was unable to use it in my code, not sure why. However this modal setting did the trick for me.

Hope it helps!

thank you so much. you save my day

kawsar-jvai · 2025-05-08T03:58:53Z

For anyone who are still having issue with this, I fixed it by using modal={false} on my DropdownMenu.Root component.

I tried the solution in the sandbox link but I was unable to use it in my code, not sure why. However this modal setting did the trick for me.

Hope it helps!

this works for me. thanks

hilmarch-dev · 2025-05-08T07:44:03Z

Hello, I found a solution in the ShadCN example from the playground.
https://ui.shadcn.com/examples/playground
Screen.Recording.2025-01-08.184030.mp4

This example also shows the issue / bug:

when you open the dialog "Content Filter Preferences" - and close it again - the UI freezes (doesn't accept any user inputs anymore) - the cause is because <body> still has the pointer-events: none;

<body style="pointer-events: none;">...

So still the most simple solution for me is to prevent the "scroll locking" via <DropdownMenu modal={false}> -> because this is currently not working with nested Dialogs - as they also want to "scroll lock".

As you can also see in the playground: when you open the dropdown - you can not scroll the page anymore - in my use case this feature was not needed - as the dropdown can stay open when I scroll (it will be repositioned correctly when you scroll)

Woks for me

walayatKhan19 · 2025-05-12T18:11:59Z

Adding modal={false} worked for me I want to open dialog from each menu item. It solves the issue blocked aria as well.

<DropdownMenu modal={false}> <DropdownMenuTrigger asChild> <Button variant="ghost" className="h-8 w-8 p-0"> <span className="sr-only">Open Menu</span> <MoreHorizontal className="h-4 w-4" /> </Button> </DropdownMenuTrigger> <DropdownMenuContent align="end"> <DropdownMenuLabel>Actions</DropdownMenuLabel> {bulkActions.map((action, index) => ( <DropdownMenuItem key={index} onClick={() => action.onClick(getSelectedRows())} disabled={table.getSelectedRowModel().rows.length === 0} > {action.label} </DropdownMenuItem> ))} </DropdownMenuContent> </DropdownMenu>

KevinMusgrave closed this as completed Dec 15, 2022

yalsayid mentioned this issue Feb 5, 2023

docs(dialog): trigger dialog from context menu or dropdown shadcn-ui/ui#55

Merged

samjowen mentioned this issue May 31, 2023

I can't click anywhere after using alert dialog. shadcn-ui/ui#468

Closed

shayant98 mentioned this issue Sep 28, 2023

[Alert Dialog]: issue with non-interactive page after closing #2416

Closed

j-brenneman mentioned this issue Nov 18, 2024

[Feature] Ability to Delete a Flow from the Index Page j-brenneman/prefect-fork#1

Closed

romantech mentioned this issue Mar 1, 2025

드롭다운 - 보드 수정 - 키보드로 취소/확인 안되는 문제 romantech/simple-kanban#59

Closed

rsimon mentioned this issue May 22, 2025

Radix Dialog Refactoring recogito/plugin-ner#2

Merged

Dialog.Trigger does not work if trigger is Dropdown.Item #1836

Dialog.Trigger does not work if trigger is Dropdown.Item #1836

Comments

KevinMusgrave commented Dec 15, 2022

Bug report

Current Behavior

Expected behavior

Reproducible example

Your environment

KevinMusgrave commented Dec 15, 2022

Uh oh!

monokizsolt commented Feb 16, 2023

Uh oh!

KevinMusgrave commented Feb 16, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

joaom00 commented Feb 16, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

monokizsolt commented Feb 16, 2023

Uh oh!

MarkShawn2020 commented Feb 22, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

DottChen commented Feb 22, 2023

Uh oh!

Kynno commented May 15, 2023

Uh oh!

AlamMena commented May 22, 2023

Uh oh!

benoitgrelard commented May 22, 2023

Uh oh!

AlamMena commented May 22, 2023

Uh oh!

benoitgrelard commented May 22, 2023

Uh oh!

0xpolarzero commented Jun 5, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

aaronoceanx commented Jul 28, 2023

Uh oh!

luneShaoGM commented Aug 11, 2023

Uh oh!

soulbliss commented Aug 19, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Malin88 commented Aug 21, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

soulbliss commented Aug 22, 2023

Uh oh!

VesperQuartz commented Sep 2, 2023

Uh oh!

mohamedamara1 commented Sep 9, 2023

Uh oh!

EliasOlie commented Sep 12, 2023

Uh oh!

coded58 commented Sep 13, 2023

Uh oh!

coded58 commented Sep 13, 2023

Uh oh!

coded58 commented Sep 13, 2023

Uh oh!

piotrkulpinski commented Sep 22, 2023

Uh oh!

dooart commented Sep 28, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

DylanTse520 commented Jun 19, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

msruan commented Jun 20, 2024

Uh oh!

kamyarkaviani commented Jun 28, 2024

Uh oh!

dancork commented Jul 1, 2024

Uh oh!

Kendaichi commented Jul 12, 2024

Uh oh!

juanrgon commented Jul 12, 2024

KevinMusgrave commented Feb 16, 2023 •

edited

Loading

joaom00 commented Feb 16, 2023 •

edited

Loading

MarkShawn2020 commented Feb 22, 2023 •

edited

Loading

0xpolarzero commented Jun 5, 2023 •

edited

Loading

soulbliss commented Aug 19, 2023 •

edited

Loading

Malin88 commented Aug 21, 2023 •

edited

Loading

dooart commented Sep 28, 2023 •

edited

Loading

DylanTse520 commented Jun 19, 2024 •

edited

Loading

knakmitch commented Oct 16, 2024 •

edited

Loading

tariky commented Oct 29, 2024 •

edited

Loading

CauaYves commented Nov 2, 2024 •

edited

Loading

matthias commented Jan 29, 2025 •

edited

Loading

walayatKhan19 commented May 12, 2025 •

edited

Loading