Can't interact with Dialog opened on top of Drawer

[ghost]

First, I want to say thanks for this library. It's saved us a great deal of time!

I noticed that there was a bug when a nested dialog is opened from within the drawer. Here's the codesandbox. Notice that when you open the drawer, then click "Open nested dialog", you are unable to interact with the nested dialog - pressing anywhere will close the bottom sheet that appears behind it first.

I thought it was because Vaul renders into the body. But I did the same for the nested modal, and even though it's higher in the stacking context hierarchy, the pointer events still hit the bottom sheet first. Some other things that might be relevant:

• Vaul seems to set pointer-events: none; on the body and pointer-events: auto; on itself
• This seems to work when I use the Radix Dialog component. Is there something I can take that it's doing into a custom modal implementation?
• I noticed the implementation uses setPointerCapture on the onPress handler. I tried removing that line but it didn't seem to help, although it could be related in some other way.

Any pointers for fixing this?

[GrantClark1999]

I'm 90% sure I've done exactly this with the same setup without issues. I think your codesandbox is private but if you make it public I can take a look and see if I was doing anything differently with my setup.

[ghost]

Ah my bad! I've updated the permissions

[emilkowalski]

Make sure your modal has pointer-evevents: auto; set. This is an edge case and I generally don't recommend opening a modal on top of drawer, but if it's really necessary just add the pointer events to it.

[ghost]

That doesn't work. As you can see in the sandbox, the modal does have pointer-events: auto on it. Please re-open this issue.

[emilkowalski]

It does work, pointer-events just don't cascade when you have nested fixed elements. You need to add it to the element below. That being sad, upon interaction with the modal, the drawer will close. You should use modal={false} on Drawer.Root, that will enable you to interact with elements outside of the drawer withotu closing it.

[ghost]

Thank you! I was able to find a fix. For future reference

• If you put the modal outside the Drawer.Root, set pointer-events: auto on the right element as shown above: you are not able to interact with the modal or the drawer. The modal will open but the drawer and the modal both close on the first interaction
• Even if you set modal={false}, the drawer will close as soon as you try to interact with the modal (although the modal will stay open).

The combination I found that works is:

• Move the modal into the Drawer.Content (still with the PortalIntoBody helper), set pointer-events: auto and modal={false}.

Sandbox

There's some unfortunate flaws with this:

• You need to now mount the drawer backdrop yourself: Drawer.Overlay doesn't appear when modal={false}
• Scrolling down on the drawer will lead to jitter and won't close as it would with modal={false} (Separate issue)

[emilkowalski]

Thanks a lot for the write up @tanishqk-shortwave.

I'll take a look at how the modal prop works and see whether we can improve it in the future.