Dialog & DropdownMenu adds pointer-events: none;

[MrgSub]

Issue occurs when you have a DropdownMenu that contains a DropdownMenuItem that has an onClick that triggers a dialog display.

	<DropdownMenu>
        <DropdownMenuTrigger asChild>
            <Button
                variant="ghost"
                className="flex h-10 w-10 p-0 data-[state=open]:bg-muted"
            >
                <DotsHorizontalIcon className="h-4 w-4" />
                <span className="sr-only">Open menu</span>
            </Button>
        </DropdownMenuTrigger>

        <DropdownMenuContent align="end" className="w-[160px]">
        	<DropdownMenuItem disabled={readonly} onClick={onClick}>{icon} {label}</DropdownMenuItem>
        </DropdownMenuContent>
    </DropdownMenu>

Simple reproduction, just add a dialog to the above and when the dialog opens you'll get the class added, blocking your UI.

Ref: #1685 modal={false} didn't work for me.

[shadcn]

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.

[REX500]

It's still an issue! I have to manually add a useEffect that will remove the pointer-events: none from my page body element...
I realized it also happens if you render the dialog in a controlled way (using useState to control it's state, as most people would):

{showDialog && (
<Dialog open onOpenChange={onClose} modal>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Are you 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>
)}

I also tried manually passing open to it like so

    <Dialog open={showDialog} onOpenChange={onClose} modal>
...

which also doesn't work. This needs to be fixed!

[kidp2h]

It's still an issue! I have to manually add a useEffect that will remove the pointer-events: none from my page body element... I realized it also happens if you render the dialog in a controlled way (using useState to control it's state, as most people would):

{showDialog && (
<Dialog open onOpenChange={onClose} modal>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>Are you 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>
)}

I also tried manually passing open to it like so

    <Dialog open={showDialog} onOpenChange={onClose} modal>
...

which also doesn't work. This needs to be fixed!

Sure, this issue need to be re open, but this css work with me for temporary

/* global.css */
body {
  pointer-events: auto !important;
}

[shiny]

Love this workaround 🤣

[florianmartens]

Also running into this. Hm. Does not seem fixed.

[adrian-burlacu-SA]

Bumping this because it's still an issue...

[vmamchur]

Experiencing the same problem.

[iPommes]

Same here. Really sad because its annoying. The CSS-Trick will work, but I think this is not the best solution since it is a bug.

[krishnarx]

/* global.css */
body {
  pointer-events: auto !important;
}

thanks bro its working perfectly

[marcosATr]

I you are using a Dropdown Item to trigger a modal, a simple solution to this problem is adding modal={false} to the DROPDOWN. Doing so will disable its modal behavior, which conflicts with the modal. This is a radix issue.

[buiducnhat]

Thanks, this helps me a lot!

[ompateldeveloper]

I you are using a Dropdown Item to trigger a modal, a simple solution to this problem is adding modal={false} to the DROPDOWN. Doing so will disable its modal behavior, which conflicts with the modal. This is a radix issue.

This worked, Saved my project , Thanks Man!

[suroorwijdan]

This saved me from scratching my head around it.

[lleifermann]

Both the CSS modification 'fix' and modal={false} are introducing side effects you probably don't want. I recommend tracking the open/closed state yourself and closing the dropdown before opening any modal. This worked for me without breaking any pointer events. @lindesvard this might also be helpful for pushModal if you happen to run into the same issue.

// Track the state yourself
const [open, setOpen] = useState(false)

// Pass it to the DropdownMenu
<DropdownMenu
  open={open}
  onOpenChange={(isOpen) => {
    setOpen(isOpen)
  }}
>

// Close the dropdown before opening any modal
<DropdownMenuItem
  onClick={() => {
    setOpen(false)
    pushModal('YourModal')
  }}
>

[AlexMachin1997]

I just came across this issue, it's something to do with how the AlertDialog works as this issue doesn't exist on a normal Dialog (I've not used the normal Dialog inside a drop-down menu yet though not 💯 sure)

For now I've just added the CSS fix which seems to fix it but not sure about the long term effects.

For some reason when you control the state yourself it's not performing the cleanup on the bodys pointer:events none styling which leads the entire UI unusable 🫠 Not a great fix bit it'll do as I spotted this at the last minute so it's good enough for now.

[akiroha27]

onClick={() => {
    setOpen(false)
    pushModal('YourModal')
  }}

This did it for me. I was hesitant to try the pointer-events: auto !important; because of potential downstream effects. Thank you

[jmamadeu]

I you are using a Dropdown Item to trigger a modal, a simple solution to this problem is adding modal={false} to the DROPDOWN. Doing so will disable its modal behavior, which conflicts with the modal. This is a radix issue.

This fixed my issue.

[AlexMachin1997]

I you are using a Dropdown Item to trigger a modal, a simple solution to this problem is adding modal={false} to the DROPDOWN. Doing so will disable its modal behavior, which conflicts with the modal. This is a radix issue.

This fixed my issue.

Did you still get the backdrop on the AlertDialog ?

[saivan]

This happens with a normal dialog for me too. I believe radix-ui/primitives#837. I don't believe it is fixed as of yet.

Messing with the pointer events of the entire body might conflict with other dialog providers too, so I'd be interested in a solution that doesn't require that.

[ErikDz]

Still not fixed

[UmarMansyur]

:v I also experienced problems

[lleifermann]

I wanted to share my observations again, as I’ve been monitoring this issue for quite some time.

From what I understand, the problem seems to occur when multiple dialogs or popovers from different dependencies are layered or nested together.

Example:
A Shadcn Dialog containing a button that opens a Shadcn DropdownMenu.

As far as I know, all components that spawn dialogs or popovers rely on the react-dismissible-layer dependency from Radix.
While I’m not an expert on this, it appears that when components are nested, they sometimes reference different versions of dismissible-layer, causing them to interfere with each other. This interference can lead to conflicts, particularly with how pointer-events: none is added or removed from the body element. These conflicts seem to cause the behavior observed in this issue.

There are also several related discussions in the Radix repositories that dig deeper into this problem. Specifically:

• Radix Issue #1088
• Radix Issue #3141

I recommend looking into them, as some people were able to fix their issues by overriding the versions of specific radix dependencies.

[cardoso-sj]

Fixed the pointer-events issue by adding proper event handling in the DialogContent component.

The fix involves:

1. Adding onCloseAutoFocus event handler to the DialogPrimitive.Content component
2. Preventing the default focus behavior
3. Restoring the pointer-events style to its original state

Here's the relevant code change:

<DialogPrimitive.Content
  // ... other props ...
  onCloseAutoFocus={(event) => {
    event.preventDefault();
    document.body.style.pointerEvents = '';
  }}
>

Shadcnui Dialog.tsx DialogContent

const DialogContent = React.forwardRef<
  React.ElementRef<typeof DialogPrimitive.Content>,
  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
>(({ className, children, ...props }, ref) => (
  <DialogPortal>
    <DialogOverlay />
    <DialogPrimitive.Content
      ref={ref}
      className={cn(
        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
        className
      )}
      {...props}
      onCloseAutoFocus={(event) => {
        event.preventDefault();
        document.body.style.pointerEvents = '';
      }}
    >
      {children}
      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
        <X className="h-4 w-4" />
        <span className="sr-only">Close</span>
      </DialogPrimitive.Close>
    </DialogPrimitive.Content>
  </DialogPortal>
))
DialogContent.displayName = DialogPrimitive.Content.displayName

[ata1de]

I'm on December 24, 2025 and this error still persists. I placed the Dialog inside a DropdownMenu in my application, as the documentation instructs, and the same error occurred. I had to do the cardoso-sj solution to solve the problem, but it doesn't remove the need for this to be solved in the lib

[skworden]

FYI: The issue is caused by opening any portal, not just a dialog. It would be helpful to have a solution that is self contained to the dropdown.

[krizh-p]

FYI: The issue is caused by opening any portal, not just a dialog. It would be helpful to have a solution that is self contained to the dropdown.

This issue's root cause is conflicting @radix-ui/react-dismissable-layer versions mentioned at #1088.

Until the radix team fixes the issue, the easiest way to fix the issue without changing any portal/dialog/dropdown code is to re-align package versions:

1. Add the following to package.json

"resolutions": {
    "@radix-ui/react-dismissable-layer": "^1.1.5"
  }

2. Delete node_modules and reinstall it with npm i (or pnpm/yarn)

[noahsark769]

For what it's worth I can see this issue still happening with react-dismissable-layer 1.1.5 and the current versions of react-context-menu and react-dropdown-menu (March 2025)

I was able to fix the issue with dropdown menus by ensuring that setIsOpen(false) is called before opening the modal, but the issue persists for context menus

[noahsark769]

Ah, the context menu thing was a dependency issue. After re-installing modules, it works!

[MrWeb]

Actually the issue is not with the Dialog, but is probably because you have the trigger inside a DropdownMenu which is the one setting the pointer-event to none.

If you do something like this it fixes it:

const openEditModal = () => {
        setTimeout(() => {
            setEditModalOpen(true);
        }, 200);
    };

<DropdownMenuItem onClick={openEditModal}>
    <><Pencil /> Edit</>
</DropdownMenuItem>

[shiny]

Still an annoying issue in 2025.

[CapitaineToinon]

My work around is to have the dialog being controlled

        const [open, setOpen] = useState(false)

	<AlertDialog
		open={open}
		onOpenChange={setOpen}
	>
		<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>
				<AlertDialogCancel>Cancel</AlertDialogCancel>
				<AlertDialogAction>Continue</AlertDialogAction>
			</AlertDialogFooter>
		</AlertDialogContent>
	</AlertDialog>

And then wrap my setState in requestAnimationFrame, this lets the dropdown close first before the modal opens and avoid the conflict as far as I can tell.

<DropdownMenuItem
    onClick={() =>
	    requestAnimationFrame(() => {
		    setOpen(true)
	    })
    }
>
    <LogOut />
    Log out
</DropdownMenuItem>

[Nimeshka]

This is fixed now. just re-install the Command and Popover.

npx shadcn@latest add popover
npx shadcn@latest add command

[natak0]

It is still an issue in "@radix-ui/react-dropdown-menu": "2.1.15"
passing modal={false} seems to work