ui [bug]: <body style="pointer-events: none;"

Describe the bug

I originally planned to implement a dialog box that pops up after clicking the right-click menu. The components used are ContextMenu and Dialog. When the dialog box pops up after clicking the menu, do nothing and click the x button in the upper right corner of the dialog box. Then, you cannot right-click on the same element again. Finally, I found that there is a style attribute "pointer-events: none;" on the body element.

Affected component/components

ContextMenu/Dialog

How to reproduce

right click on ContextMenuTrigger
click ContextMenuItem and show a Dialog
close the x button of the Dialog

The following is a full code example

import React, { useCallback, useState } from 'react';
import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuTrigger
} from '@/components/ui/context-menu';
import {
  Dialog,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogTitle
} from '@/components/ui/dialog';
import { Label } from '@/components/ui/label';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';
import { enablePointerEvents } from '@/lib/pointer-events';

export function TreeView() {
  const [newDialogVisible, setNewDialogVisible] = useState(false);
  const [inputValue, setInputValue] = useState('');
  const onAdd = useCallback(() => {
    setNewDialogVisible(true);
  }, []);

  const handleNewDialogClose = () => {
    setNewDialogVisible(false);
    // shadcn bug
    enablePointerEvents();
  };

  const add = () => {
    // 
  };

  return (
    <div className="pl-2 pr-2 flex flex-1">
      <ContextMenu>
        <ContextMenuTrigger className="flex flex-1 text-sm">
          lorem
        </ContextMenuTrigger>
        <ContextMenuContent className="w-64">
          <ContextMenuItem inset onClick={onAdd}>
            New
          </ContextMenuItem>
        </ContextMenuContent>
      </ContextMenu>

      <Dialog open={newDialogVisible}>
        <DialogContent className="sm:max-w-[425px]" onClose={handleNewDialogClose}>
          <DialogHeader>
            <DialogTitle>New</DialogTitle>
          </DialogHeader>
          <Label className="flex items-center space-x-2 w-full">
            <span>Name</span>
            <Input
              value={inputValue}
              onChange={(event) => setInputValue(event.target.value.trim())}
              className="flex-1"
            />
          </Label>
          <DialogFooter>
            <Button type="submit" onClick={add}>Add</Button>
          </DialogFooter>
        </DialogContent>
      </Dialog>
    </div>
  );
}

To solve this problem, I wrote a method called enablePointerEvents.

// lib/pointer-events.ts
export function enablePointerEvents() {
  document.body.style.pointerEvents = '';
}

Codesandbox/StackBlitz link

No response

Logs

System Info

- system: mac os
- browser: chrome

Before submitting

[x] I've made research efforts and searched the documentation
[x] I've searched for existing issues

Apr 20 '25 12:04 sunshmo

I would like to work on this. Can this issue be assigned to me?

Apr 22 '25 12:04 CodeLeom

I have the same problem, but just need to clear the.next and node_modules directories and then re-run npm i and npm run dev. I don't know why

Apr 23 '25 08:04 tonyerx

version 1.1.7 of @radix-ui/react-dialog and @radix-ui/react-alert-dialog will encounter this issue, while version 1.1.6 will not.

Apr 23 '25 08:04 tonyerx

version 1.1.7 of @radix-ui/react-dialog and @radix-ui/react-alert-dialog will encounter this issue, while version 1.1.6 will not.

"dependencies": {
    "@radix-ui/react-dialog": "^1.1.6"
}

current version is 1.1.6 and The actual installed version is also 1.1.6.

Apr 24 '25 08:04 sunshmo

I would like to work on this. Can this issue be assigned to me?

Thank you very much. I implemented a contextmenu component to replace it.

Apr 24 '25 08:04 sunshmo

@sunshmo:

Property 'onClose' does not exist on type 'IntrinsicAttributes & DialogContentProps & RefAttributes<HTMLDivElement>'.ts(2322)
...
interface DialogProps {
    children?: React.ReactNode;
    open?: boolean;
    defaultOpen?: boolean;
    onOpenChange?(open: boolean): void;
    modal?: boolean;
}
...

It is not the point.

Apr 24 '25 08:04 sunshmo

i have same bug, i have Dialog inside Drodown, when i open dialog it add pointer-events: none; to body then dialog open store that styles and when that dialog closes it restores pointer-events: none; back to body so whole page is not clickable anymore :/

using

"@radix-ui/react-dialog": "^1.1.11",
"@radix-ui/react-dropdown-menu": "^2.1.6",

Easyiest FIX for me is setting modal={false} to DropdownMenu component until they fix it enjoy

Apr 25 '25 14:04 Engazan

It's a strange problem, the menu bar also has this phenomenon

Apr 26 '25 14:04 little077

i have same bug, i have Dialog inside Drodown, when i open dialog it add pointer-events: none; to body then dialog open store that styles and when that dialog closes it restores pointer-events: none; back to body so whole page is not clickable anymore :/

using
"@radix-ui/react-dialog": "^1.1.11",
"@radix-ui/react-dropdown-menu": "^2.1.6",
Easyiest FIX for me is setting modal={false} to DropdownMenu component until they fix it enjoy

This method is ineffective for me, setting modal to false will cause click penetration.

Apr 27 '25 10:04 tonyerx

version 1.1.7 of @radix-ui/react-dialog and @radix-ui/react-alert-dialog will encounter this issue, while version 1.1.6 will not.

"dependencies": { "@radix-ui/react-dialog": "^1.1.6" } current version is 1.1.6 and The actual installed version is also 1.1.6.

You should check the package-lock.json file to confirm the accurate version, rather than the package.json file.

Apr 27 '25 10:04 tonyerx

Also encounter this problem. enablePointerEvents works as a workaround.

May 02 '25 12:05 shiny

Also encounter this problem. enablePointerEvents works as a workaround.

where can we set this?

May 04 '25 09:05 muhaimincs

This issue can also occur when using uncontrolled Dialog in DropdownMenuItem

May 07 '25 08:05 Kevenye

Yeah I am also facing this issue on 1.1.7 and I upgraded to 1.1.13 and still have it occuring.

May 15 '25 04:05 jamesg1

modal={false}

Yeah this did the job thanks <DropdownMenu modal={false}>. No need to downgrade 1.1.13 works fine.

May 15 '25 15:05 jamesg1

body{
  pointer-events: all !important;
}

works for me

May 16 '25 08:05 forestlioooooo

i have same bug, i have Dialog inside Drodown, when i open dialog it add pointer-events: none; to body then dialog open store that styles and when that dialog closes it restores pointer-events: none; back to body so whole page is not clickable anymore :/

using
"@radix-ui/react-dialog": "^1.1.11",
"@radix-ui/react-dropdown-menu": "^2.1.6",
Easyiest FIX for me is setting modal={false} to DropdownMenu component until they fix it enjoy

Thanks!

May 28 '25 12:05 anton-yefanov

I also faced this issue in DropdownMenu. I just added modal={false}, and it fixed the issue

<DropdownMenu modal={false}>

May 31 '25 05:05 feri-irawan

the same problem with AlertDialog

Clear install of npm packages helped me

Jun 03 '25 17:06 VladyslavL

I've upgraded the @radix-ui/react-dropdown-menu to 2.1.16 and reinstall the dropdown-menu component and back to work

pnpm dlx shadcn@latest add dropdown-menu

Nov 08 '25 16:11 candidosales

I ran into this issue when implementing a dialog in my case. I tried using modal={false}, but it made the area outside the dialog clickable. Using enablePointerEvents approach worked for my case.

Nov 18 '25 20:11 prs3co