How to get rid of the pointer-event none when opening a dialog.

[popoleeMaster]

Hello,

I have a project in React 18 using using "@radix-ui/react-dialog": "^1.0.0".

When I open a dialog in Radix, there is a style added to the body pointer-events: none;.
This style prevent some element that I portalled to the body and that can happen above the dismissable layer to be unclickable.

For example, I have a dialog that has some feedback as a toast, the toast appear on top of the backdrop, but the toast is not clickable because of the body being not interactable.

I would like to avoid altering the body on modal opening. I saw that there is a boolean named disableOutsidePointerEvents that is defaulted to true, and might cause this behavior, but it is not changeable from the dialog settings.

export interface DialogContentProps extends DialogContentTypeProps {
    forceMount?: true;
}
interface DialogContentTypeProps extends Omit<DialogContentImplProps, 'trapFocus' | 'disableOutsidePointerEvents'> {

Is there a way to remove that behavior when implementing dialogs ?

[benoitgrelard]

Hey @popoleeMaster,

Toast also uses DismissableLayer so should be part of the stack. Are you using the latest versions of both primitives? There can be some issues with the layering if they aren't both using the same underlying dismissable layer version.

Alternatively, if it's because your toasts are not using Radix toast but another library, you can just set pointer-events: auto on them.

Worse case scenario, you can make your dialog non-modal by setting modal={false} but be aware that this changes accessibility semantics as it means one can always fully interact outside the dialog when open (no scroll locking, no overlay, etc).

[popoleeMaster]

Thank you !

[QzCurious]

Alternatively, if it's because your toasts are not using Radix toast but another library, you can just set pointer-events: auto on them.

Hi @benoitgrelard. Could you state this situation on Dialog doc? It might help people like me who not know about how radix primitive prevent every other things from being clicked.

[zhaoyu1999]

I encountered the same issue. I use dialog and toast on the same page. If I open the toast first and then open the dialog, the buttons in the toast will become unclickable. I understand it makes sense to disable all pointer events when the dialog is opened. But is there a way I can make some exceptions?

https://codesandbox.io/p/devbox/elastic-surf-mwfxlv