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

413n · 2022-03-14T12:10:41Z

Update of April 2024

This bug seems to be still appearing in newer versions. You will find some workarounds in the recent comments. ⬇️

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:

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

The text was updated successfully, but these errors were encountered:

benoitgrelard · 2022-04-05T09:07:24Z

Hi @413n,

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

janhoogeveen · 2022-04-05T09:48:54Z

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

benoitgrelard · 2022-04-05T12:30:29Z

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 · 2022-04-07T04:04:39Z

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.

benoitgrelard · 2022-05-12T11:49:59Z

I am still able to replicate this in main.
Some further observation: It only appears to be an issue when there's a close CSS animation on the Content part, ie. when it hands around.

Looking into it.

Fixes #1241 Fixes #1263

* [DismissableLayer] Fix pointer-events issues Fixes #1241 Fixes #1263 * PR feedback * Add cypress tests * testing flake * Fix flake? * Fix false positive * Copy change

* [DismissableLayer] Fix pointer-events issues Fixes radix-ui#1241 Fixes radix-ui#1263 * PR feedback * Add cypress tests * testing flake * Fix flake? * Fix false positive * Copy change

PeerRich · 2022-07-31T17:33:00Z

@benoitgrelard has this been fixed? we're experiencing this at calcom/cal.com#2328

benoitgrelard · 2022-08-01T15:34:26Z

Hey @PeerRich yes it has been fixed and released as part of the v1 release. Have you upgraded?

PeerRich · 2022-08-01T15:36:23Z

doesn't seem like we did? https://github.com/calcom/cal.com/blob/b42f0ffadd525c8ed6d79e1034e8122dbe0e8036/apps/web/package.json#L52-L61

helenahedstrom · 2023-12-01T12:56:14Z

I got this issue when I opened a dialog on click in a dropdown menu.

I solved it before I found this thread by setting a timeout in the onclick function before opening the dialog so it has time to reset styling set by the dropdown menu.

Will however see if upgrades solves it so I wont need a timeout.

robintown · 2023-12-08T21:00:50Z

I am still experiencing this issue when using an animated menu in combination with an animated dialog, and I have identified the root cause: This occurs whenever you have multiple copies of @radix-ui/react-dismissable-layer in your tree, because that package relies on some global state to track when to remove the pointer-events rule from the <body>, and that global state is not shared across multiple copies of the module.

Others experiencing this issue: You can avoid it by making sure there is only 1 copy of @radix-ui/react-dismissable-layer in your build output.

First, try upgrading your dependencies. This may work if the versions of your @radix-ui packages were out of sync, causing your package manager to pull in multiple versions of @radix-ui/react-dismissable-layer.
If you're working with a linked package that also uses Radix Primitives, that might not be enough: there could still be other copies present in the node_modules of the linked package. Your best bet for dealing with this is to ask your build tool to de-duplicate @radix-ui/react-dismissable-layer, for example with Vite's resolve.dedupe option.

Maintainers: An ideal solution would be for @radix-ui/react-dismissable-layer to still function, even when multiple copies of the module are in use - I think this is achievable. Also, the reproduction case given by @hipstersmoothie in #1241 (comment) looks like it's showing yet another reason why pointer-events can get stuck?

robintown · 2023-12-08T21:16:10Z

Oh, and now I've found these related issues: #1088 #2355

imhoffd · 2024-01-12T01:08:10Z

I am also running into this issue. I double-checked our bundle and confirmed that we only have one @radix-ui/react-dismissable-layer package. We are also on the latest versions of all Radix packages.

I forked @hipstersmoothie's codesandbox demo and updated the versions to demonstrate that it's still reproducible with the latest versions: https://codesandbox.io/p/sandbox/dropdownmenu-dialog-items-forked-94x39v?file=%2Fsrc%2FApp.js

Repro steps:

Click "Actions"
Click "Edit 2"
Click again quickly to dismiss the dialog before the dropdown menu exit animation is complete
Observe pointer-events: none still on body

I believe this is the best way to demonstrate the bug, although in our app we are seeing the bug occur with a dropdown within a dialog, both dismissed at the same time roughly equivalent exit animation durations.

@benoitgrelard Sorry for the ping, but we've seen this manifest in multiple ways (e.g dialog as child of dropdown, vice versa) and it does have a disastrous effect on the app as it renders it unresponsive to all pointer events.

In the meantime, I am going to implement this workaround (thanks @brandalx). This is what I ended up with in Dialog.tsx (just make sure the timeout is longer than your exit animations, but short enough to unfreeze your app before a user can interact):

  useEffect(() => {
    if (!open) {
      setTimeout(() => {
        document.body.style.pointerEvents = ''
      }, 500)
    }
  }, [open])

Thank you to the maintainers and contributors of Radix! We are thoroughly pleased thus far.

mardausdennis · 2024-01-14T13:25:35Z

I forked @hipstersmoothie's codesandbox demo and updated the versions to demonstrate that it's still reproducible with the latest versions: https://codesandbox.io/p/sandbox/dropdownmenu-dialog-items-forked-94x39v?file=%2Fsrc%2FApp.js

Repro steps:

Click "Actions"

Click "Edit 2"

Click again quickly to dismiss the dialog before the dropdown menu exit animation is complete

Observe pointer-events: none still on body

I believe this is the best way to demonstrate the bug, although in our app we are seeing the bug occur with a dropdown within a dialog, both dismissed at the same time roughly equivalent exit animation durations.

In the meantime, I am going to implement this workaround (thanks @brandalx). This is what I ended up with in Dialog.tsx (just make sure the timeout is longer than your exit animations, but short enough to unfreeze your app before a user can interact):
  useEffect(() => {
    if (!open) {
      setTimeout(() => {
        document.body.style.pointerEvents = ''
      }, 500)
    }
  }, [open])

I'm experiencing the same issue in my project, though it happens with a popover inside a modal dialog. When I open the popover and then close the dialog, everything becomes unresponsive, just as you described.

The workaround you mentioned also works for me, but I agree it seems a bit hacky. It would be ideal to get this bug fixed properly as soon as possible, especially since I see it's been around for a while.

As developers, having these basic functions work reliably is crucial so we don't negatively impact the user experience. I hope the Radix devs can get this sorted out soon.

JRhodes95 · 2024-04-01T19:19:37Z

Hey folks - just seconding that this appears to be an ongoing issue.

Don't have a perfect repro example but I'm using the dropdown as an actions menu on a table.
A 'delete' action triggers an alert dialog but when closing it the pointer-events:none remains on the body.
Have checked and all radix deps are up to date.

Appreciate your work on Radix but would be awesome if you could take a look at this one!

Thanks

sturdynut · 2024-04-10T22:39:19Z

Having this issue as well with the latest version. To fix, I found that you can simply wire up the onOpenChange and update the body pointerEvents there. See example below.

...
const handleOnOpenChange = (open: boolean) => {
    // Bug fix: Radix UI leaves pointer-events none on body when dialog is closed
    if (open === false) {
      document.body.style.pointerEvents = "auto";
    }
  };

  return (
    <Dialog.Root onOpenChange={handleOnOpenChange}>
...

hwride · 2024-04-26T13:09:25Z

In my case I have found this happens when you attach a close animation to the overlay, and that it also causes the overlay not to be removed. This doesn't happen without the close animation. Using version 1.0.5.

hwride · 2024-04-26T13:13:58Z

Hi @benoitgrelard, should this one be re-opened? It seems it's still happening to quite a few people. Thanks.

swiftpaca · 2024-05-22T17:24:05Z

Hi @benoitgrelard, this is still an issue. Any updates/progress? Appreciate the help.

Abduganeoff · 2024-05-23T08:46:13Z

I experienced the same issue while using the radix DropdownMenu and Dialog together

setting modal={false} on DropdownMenu.Root fixes it for me https://www.radix-ui.com/docs/primitives/components/dropdown-menu#root

@dimaMachina I was also having the same issue with Dialog and DropdownMenu. you are just brilliant 🚀

dalalRohit · 2024-07-16T10:24:39Z

setting modal={false} on <DropdownMenu /> solved it for me.

radix-ui/primitives#1241 (comment)

K-Mistele · 2024-07-30T19:17:03Z

Setting modal={false} doesn't work for me because the dialog closes instantly again - probably because I'm using it in conjunction with a dropdown menu. It seems like this is a regression?

sahanatvessel · 2024-08-15T06:31:25Z

why was this issue closed?

sahanatvessel · 2024-08-15T06:31:40Z

related #2122

Notmeomg · 2024-08-18T21:44:53Z

This issue was resolved for me by aligning package versions. I did this after reading #1088.

kacem22 · 2024-08-20T11:28:09Z

For us, this was being caused by a dialog being opened by a dropdown.

Two possible fixes for us were:

Update @radix-ui/react-dropdown-menu to 2.0.6

Add modal={false} to the dropdowns (not needed if you update)

it works for me thank you @TranquilMarmot

HussainAhmadDev · 2024-09-05T21:05:59Z

The simple css solution is to just give pointer-events: auto to the other element that got broken due to the body pointer-events: none easy hack 😊

jvenus99 · 2024-10-01T18:26:00Z

Hi Guys!
I found a other solution for this problem. I just install a dependency @radix-ui/react-dismissable-layer
So, do npm i @radix-ui/react-dismissable-layer and rerun your project.

Aslam97 · 2024-10-03T10:28:34Z

Hi Guys! I found a other solution for this problem. I just install a dependency @radix-ui/react-dismissable-layer So, do npm i @radix-ui/react-dismissable-layer and rerun your project.

this does work if I remove node_modules and lock file.

efeguerrero · 2024-10-04T15:52:49Z

Hi Guys! I found a other solution for this problem. I just install a dependency @radix-ui/react-dismissable-layer So, do npm i @radix-ui/react-dismissable-layer and rerun your project.

This package is the problem when you have different versions of it as dependencies of your radix-ui elements (check package-lock.json).

My solution was deleting node_modules and package-lock.json and installing everything fresh again.

Now all @radix-ui/react-dismissable-layer versions used by radix elements are the same and the issue is gone.

dytra · 2024-10-07T07:46:14Z

In my case I'm using <ContextMenu /> for triggering the dialog.
Setting the modal prop to false solves the issue

<ContextMenu key={item.fileId} modal={false}>
...
</ContextMenu>

413n changed the title ~~[Dialog] Strange Pointer-events interaction~~ [Dialog] Strange Pointer-events behavior Mar 14, 2022

benoitgrelard added the Type: Bug Confirmed bug label Apr 5, 2022

benoitgrelard added Priority: High High priority issue Resolution: Backlog Package: react/dialog labels Apr 6, 2022

benoitgrelard self-assigned this Apr 6, 2022

benoitgrelard changed the title ~~[Dialog] Strange Pointer-events behavior~~ [Dialog] body pointer-events: none remains after closing Apr 6, 2022

benoitgrelard mentioned this issue Apr 6, 2022

[Select] Focus prevents click event #1246

Closed

benoitgrelard added Priority: Urgent Urgent priority issue and removed Resolution: Backlog Priority: High High priority issue labels Apr 6, 2022

Dueen mentioned this issue Apr 14, 2022

you cant scroll on mobile after opening a dialog or dropdown calcom/cal.com#2328

Closed

benoitgrelard added this to the Release: Agile Halo milestone Apr 28, 2022

This was referenced May 12, 2022

[Dialog] on touch devices blocks body input after closing #1236

Closed

[Dialog] After dismissing the dialog on mobile, the next touch event is invalidated #1398

Closed

benoitgrelard added a commit that referenced this issue May 16, 2022

[DismissableLayer] Fix pointer-events issues

cfa0acb

Fixes #1241 Fixes #1263

benoitgrelard mentioned this issue May 16, 2022

[DismissableLayer] Fix pointer-events issues #1401

Merged

benoitgrelard added a commit that referenced this issue May 19, 2022

[DismissableLayer] Fix pointer-events issues

2dc70ad

Fixes #1241 Fixes #1263

benoitgrelard closed this as completed in #1401 May 19, 2022

PeerRich mentioned this issue Aug 1, 2022

Upgrade Radix UI to v.1.0 calcom/cal.com#3631

Closed

ugokoli mentioned this issue Dec 18, 2023

React dismissable layer @1.0.5 bug #2597

Closed

domeccleston mentioned this issue Jan 12, 2024

fix: UI papercuts unkeyed/unkey#796

Merged

16 tasks

cuserox mentioned this issue Jun 24, 2024

fix: clicking a select when editing a color token now keeps the modal open tokens-studio/figma-plugin#2892

Closed

softmarshmallow added a commit to gridaco/grida that referenced this issue Jun 26, 2024

modal false - radix-ui/primitives#1241 (comment)

b812888

mfts added a commit to mfts/papermark that referenced this issue Jul 26, 2024

fix(radix-ui): reset pointer-events on body

325a30e

radix-ui/primitives#1241 (comment)

jisung-lee7 mentioned this issue Aug 31, 2024

fix(cff-12): pointer-events none remains after closing issue coding-for-fun-org/frontend#364

Merged

maiconcarraro mentioned this issue Sep 17, 2024

Update from v0.9.1 to v0.9.3 CSS bug emilkowalski/vaul#422

Closed

meszarosdezso mentioned this issue Sep 26, 2024

[Bug]. Dialog and Dropdown Menu components conflict #3141

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

413n commented Mar 14, 2022 •

edited

Loading

benoitgrelard commented Apr 5, 2022

janhoogeveen commented Apr 5, 2022

benoitgrelard commented Apr 5, 2022

HeatedGrace commented Apr 7, 2022

benoitgrelard commented May 12, 2022 •

edited

Loading

PeerRich commented Jul 31, 2022

benoitgrelard commented Aug 1, 2022

PeerRich commented Aug 1, 2022

helenahedstrom commented Dec 1, 2023 •

edited

Loading

robintown commented Dec 8, 2023

robintown commented Dec 8, 2023

imhoffd commented Jan 12, 2024

mardausdennis commented Jan 14, 2024

JRhodes95 commented Apr 1, 2024

sturdynut commented Apr 10, 2024

hwride commented Apr 26, 2024

hwride commented Apr 26, 2024

swiftpaca commented May 22, 2024

Abduganeoff commented May 23, 2024 •

edited

Loading

dalalRohit commented Jul 16, 2024 •

edited

Loading

K-Mistele commented Jul 30, 2024

sahanatvessel commented Aug 15, 2024

sahanatvessel commented Aug 15, 2024

Notmeomg commented Aug 18, 2024 •

edited

Loading

kacem22 commented Aug 20, 2024 •

edited

Loading

HussainAhmadDev commented Sep 5, 2024 •

edited

Loading

jvenus99 commented Oct 1, 2024

Aslam97 commented Oct 3, 2024

efeguerrero commented Oct 4, 2024

dytra commented Oct 7, 2024

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

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

Comments

413n commented Mar 14, 2022 • edited Loading

Update of April 2024

Bug report

Current Behavior

Expected behavior

Reproducible example

Additional context

benoitgrelard commented Apr 5, 2022

janhoogeveen commented Apr 5, 2022

benoitgrelard commented Apr 5, 2022

HeatedGrace commented Apr 7, 2022

benoitgrelard commented May 12, 2022 • edited Loading

PeerRich commented Jul 31, 2022

benoitgrelard commented Aug 1, 2022

PeerRich commented Aug 1, 2022

helenahedstrom commented Dec 1, 2023 • edited Loading

robintown commented Dec 8, 2023

robintown commented Dec 8, 2023

imhoffd commented Jan 12, 2024

mardausdennis commented Jan 14, 2024

JRhodes95 commented Apr 1, 2024

sturdynut commented Apr 10, 2024

hwride commented Apr 26, 2024

hwride commented Apr 26, 2024

swiftpaca commented May 22, 2024

Abduganeoff commented May 23, 2024 • edited Loading

dalalRohit commented Jul 16, 2024 • edited Loading

K-Mistele commented Jul 30, 2024

sahanatvessel commented Aug 15, 2024

sahanatvessel commented Aug 15, 2024

Notmeomg commented Aug 18, 2024 • edited Loading

kacem22 commented Aug 20, 2024 • edited Loading

HussainAhmadDev commented Sep 5, 2024 • edited Loading

jvenus99 commented Oct 1, 2024

Aslam97 commented Oct 3, 2024

efeguerrero commented Oct 4, 2024

dytra commented Oct 7, 2024

413n commented Mar 14, 2022 •

edited

Loading

benoitgrelard commented May 12, 2022 •

edited

Loading

helenahedstrom commented Dec 1, 2023 •

edited

Loading

Abduganeoff commented May 23, 2024 •

edited

Loading

dalalRohit commented Jul 16, 2024 •

edited

Loading

Notmeomg commented Aug 18, 2024 •

edited

Loading

kacem22 commented Aug 20, 2024 •

edited

Loading

HussainAhmadDev commented Sep 5, 2024 •

edited

Loading