How to build a Dialog that allows interaction with the background elements?

[franciscohanna92]

Hello everyone! 👋🏻

I'm building a component that behaves like something between a Toast and a Dialog. As a Toast because it apperas from a corner (actually, the bottom of the screen) and doesn't block the background elements, and as a Dialog because it has some complex interactions inside of it (basically, a form).

For what I understand, this doesn't comply with the definition of a toast (subtle, non-interruptive notification to the user), so I think it's a dialog. It may be called a snack bar or a toolbar, but I'm trying to use definitions of components that already exist on Radix.

Is there anyway in which the radix Dialog could be used this way? I haven't found a way to allow interaction with the background elements without closing it. I have tried removing the Overlay and setting onInteractOutside={(e) => e.preventDefualt()} on the Content but this doesn't work either.

Any suggestions?

[benoitgrelard]

I think you are looking for a non-modal dialog, in which case you are looking for modal={true} on the Root part.
And you are correct with onInteractOutside={(e) => e.preventDefault()} to prevent closing on outside interactions.

[franciscohanna92]

Oooh, that's it... Thanks a lot @benoitgrelard ! 🙌🏻

[dcheglakov]

@benoitgrelard can I achieve the same behavior but not setting modal to false? So I need to show overlay but want to click outside the dialog with onInteractOutside={(e) => e.preventDefault()}

My use case is that we showing a toast message when dialog is opened and I want to close the toast.

Thanks.