modal components are incompatible with third-party modals

[ciampo]

Bug report

Current Behavior

When using any components supporting the option to render as modal, other third-party pieces of UI that would need to also render as modal on top of the radix component stop working as expected, due to the pointer events / scroll / focus trap that Radix components create.

This makes it practically impossible to integrate Radix in existing projects, where not all UI elements are using Radix.

Furthermore, this also breaks browser extensions (like Grammarly or Google Translate) that would display additional UI when activated.

Expected behavior

There should be a way for third-party "Modal" content to render and be interactive of top of Radix's modal components.

Reproducible example

https://codesandbox.io/s/interesting-julien-9lr83p

Suggested solution

Additional context

Your environment

Software	Name(s)	Version
Radix Package(s)
React	n/a
Browser
Assistive tech
Node	n/a
npm/yarn
Operating System

[JesseKuntz]

Encountering the same issue. I've tried preventing default in onInteractOutside (and a few of the other options) but I've resorted to closing the Radix Dialog before opening the 3rd party modal, and opening the Radix Dialog again upon closing the 3rd party modal.

[ciampo]

I've resorted to closing the Radix Dialog before opening the 3rd party modal, and opening the Radix Dialog again upon closing the 3rd party modal.

This may not be an option for all projects, especially when the entirety of the UI is not implemented using Radix. On top of that, browser overlays and browser extensions may not work properly too, which is not good.

[JesseKuntz]

I agree. I think we're just missing a way to remove the focus trap on demand.

[victorgaard]

I managed to make it work by setting the modal property of Dialog.Root as false, so I can interact with things on top of it, but now the Overlay won't show. 😅

I agree it would be nicer to just have an option to remove the focus trap on demand.

[AlexMNet]

@JesseKuntz @ciampo it was so much gymnastics just to get that too work properly I just created my own dialog. Haha. I am using the next-cloudindary widget to upload images which opens up in its own modal. Hopefully this will get fixed soon as this is a common scenario.

[magoz]

I'm also encountering this issue. In my case, the issue is not being able to get pointer events when the Dialog is open.

[nacho-villanueva]

I'm having the same problem. I have a modal with a login form and all password managers like NordPass become unclickable cause the body sets pointer-events to none. Any updates on this? Seems quite like a pretty common scenario in general.

[nacho-villanueva]

A quick fix for me was to add this to the css:

body[style*='pointer-events: none'] > *:not(#app) {
  pointer-events: all;
}

(Thank you ChatGPT)

[benoitgrelard]

Duplicate of #1859