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;
}

[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.

[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.

[akiroha27]

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 ?

Yes @AlexMachin1997

[tbrownio]

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 also resolved my issue. Thanks!

[nisimi96]

so modal={false} + body pointer-events: auto !important
this is the only way to go?

[nilsbunger]

so modal={false} + body pointer-events: auto !important this is the only way to go?

In my case the popovers where this was an issue were all under a top-level div with data-portal="true". So I just added this to my global CSS to fix it:

body > div[data-portal="true"] {
  pointer-events: auto;
}

[restoker]

December 2024 and the issue persist