Sonner loses state after portaling to a top layer <dialog>

[mkrause]

I'm trying to use sonner in an app that uses HTML <dialog> elements for modals. Due to the issues described here, in order to make this work with toast notifications, I need to use createPortal() to render the <Toaster/> inside the <dialog>. However, if I do this, any toasts that are already open get reset. The "re-portaling" from one location in the DOM to another makes it lose its component state.

Would it be possible to allow Toaster to be a controlled component? That is, allow toasts and setToasts to be passed in as props. That way, I can maintain this state in the parent component which does not get remounted and therefore the <Toaster/> element can be freely moved around.

[emilkowalski]

Rendering something while the dialog is still open seems like an anti-pattern. The dialog blocks interaction with outside elements for a reason. I think the best solution here would be to render the toasts after the dialog is closed.