[Dialog] on touch devices blocks body input after closing

[janhoogeveen]

Bug report

I've noticed that when I use a Dialog and I close it with a close button, it will block all pointer events on mobile devices until after I've clicked somewhere in the body. I originally thought it was because I was missing a Trigger component.

In my project, I'm opening the toolkit item based on URL state through interaction in a carousel. That means after the first Dialog, the carousel stops working. It's quite a broken experience.

I'm quite sure it's this block of code that's causing the issue: https://github.com/radix-ui/primitives/blob/main/packages/react/use-body-pointer-events/src/useBodyPointerEvents.tsx#L33:L51

Current Behavior

1. Change URL
2. Based on URL, open Dialog window (controlled component) isToolkitOpen: true

<Dialog.Root open={isToolkitOpen}>...<Dialog.Root/>

4. Click on close button, which changes URL state by calling:

    router.push(`/project/${projectId}`, undefined, {
      shallow: true,
      scroll: false,
    });

5. State updates, Dialog closes because isToolkitOpen: false
6. Notice body is still locked

Expected behavior

Body pointer lock gets removed, maybe with a timeout?
Having to click before you can use your pointer events again is not good UX.

Reproducible example

Not in code, but here's the problem in a screen record.

Screen.Recording.2022-03-09.at.11.52.06.mov

Suggested solution

Remove pointer-events: 'none' immediately after closing the dialog?

Additional context

There's no issue if I close the dialog with ESC or other keyboard interaction. Only on tap. Mouse events work just fine too.

Your environment

Software	Name(s)	Version
Radix Package(s)	@radix-ui/react-dialog	^0.1.7
React	n/a	^17.0.2
Browser	Chrome	v99
Assistive tech
Node	n/a	v16.13.2
npm/yarn	yarn	1.22.17
Operating System	MacOS	12.2.1

[janhoogeveen]

Just tried downgrading @radix-ui/react-dialog to 0.1.6 and now it works fine for me. Whatever changed between 0.1.6 and 0.1.7 must be the cause of this.

This PR maybe?
#1209

[benoitgrelard]

Hi @janhoogeveen,

Thanks for reporting this.
I cannot reproduce this in our demo example. Are you able to?
Otherwise, can you send a sandbox that I can test?

Thanks

[benoitgrelard]

On closer inspection, I think this a duplicate of #1241 as I couldn't reproduce it with our demo but our demo doesn't have a close animation on Content and I've since discovered that it's the condition for the issue to arise.

I know this one was the original issue, but I will close it as a duplicate of #1241 as the other one has an example of the regression.

Thanks again @janhoogeveen 🙏