[Dialog] body pointer-events: none remains after closing

[413n]

Update of March 2025

This bug seems to be still appearing in newer versions. You will find some workarounds in the recent comments. ⬇️
Check the latest fix found by @cardoso-sj : #1241 (comment)

Bug report

Current Behavior

With Dialog version 0.1.7 the pointer-events seems to remain on the body with the Chrome device emulator using a mobile device (e.g. iPad Air), while in the 0.1.6 it works fine.

Expected behavior

The pointer-events should always be removed from the body after the closing animation has finished.

Reproducible example

The 2 repos are identical, except the @radix-ui/react-dialog version:

• Version 0.1.7
• Version 0.1.6

Additional context

I forked the radix-ui/design-system repo on codesandbox to reproduce this bug keeping the original code but changing just the version of the @radix-ui/react-dialog.

Note: In the version 0.1.7, the problem should be solved by removing the close animation from the Content

[benoitgrelard]

Hi @413n,

I can reproduce the bug using your sandboxes.
Thanks for reporting.

[janhoogeveen]

@benoitgrelard Seems like this is the same as #1236. Since this one has a working example already, should we close the other one? 👍🏻

[benoitgrelard]

I've been wondering too, but I haven't verified fully that it is indeed the same.
Once confirmed I will close one as duplicate.

[HeatedGrace]

I use the AlertDialog and have the same question.
When AlertDialog.Trigger controls the open, body element can remove the 'pointer-events' normally.
But when i use the AlertDialog.Root open attribute, body element still keep the 'pointer-events' after close.