pointer-events none is not cleaned up when unmounting dialog that contained opened popover

[adamborowski]

Bug Report: Unresponsive Page After Dialog Unmounting

Description

When using a <Dialog> component that contains an inner <DropdownMenu>, clicking a menu item that triggers the dialog's content unmount causes the entire page to remain unresponsive. It appears that the CSS property pointer-events: none persists even after the dialog is removed.

Steps to Reproduce

1. Open the dialog.
2. Open the dropdown menu inside the dialog.
3. Click the menu item that executes a handler (e.g., handlerThatUnmountsDialog) to unmount the dialog content.
4. Notice that, although the dialog content is unmounted, the rest of the page remains unclickable due to lingering pointer-events: none.

<Dialog>
  <DialogContent>
    <DropdownMenu>
      <DropdownMenuTrigger />
      <DropdownMenuContent>
        <DropdownMenuItem
          className="text-red-500"
          onClick={handlerThatUnmountsDialog}
        >
          Menu item
        </DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  </DialogContent>
</Dialog>

Expected Behavior

After the dialog content is unmounted, the page should return to its normal state with all pointer events re-enabled, ensuring that the page remains fully interactive.

Actual Behavior

The page remains unclickable after the dialog is unmounted because the pointer-events: none property is not being removed.

Environment

Software	Name(s)	Version
Radix Packages	popover, dialog	1.1.6
React		18, 19
Browser	Chrome
Operating System	macOS

Additional Context

A minimal reproducible example is available for review here: V0 example.

Suggested Solution

No proposed solution at this time.

[MacPiston]

Yep, just spent 2h figuring this out why after packages reinstall (+ lockfile regen) this started happening. Bringing @radix-ui/react-dialog back to 1.0.x fixed the issue, although I'm not sure whether 1.0.x is actually necessary, or some 1.1.x version works.

In my case the steps are as following:

1. Open DropdownMenu
2. Select option that causes Dialog to open
3. Close Dialog
4. End up with unscrollable page

[AndreiRailean]

Started happening to me after upgrade as well. Instead of downgrading, I just upgraded all other radix packages and the issue went away. I assume there was a fix in an internal shared dependency.

[n783942]

Solved for me by setting modal={false} to DropdownMenu component