Toast inside Dialog

[abhic91]

I'm using the Toast inside a component that appears inside a modal(Dialog). When I do this, the toast appears from inside the modal instead of from outside the viewport.

I could see that the modal is outside the root div, but the Toast's div isn't outside the modal's div as its sibling but as its child.

How do I make the Toast appear from the viewport instead of from the modal? And thanks for making radix-ui.

[benoitgrelard]

Hi @abhic91,

Do you have a sandbox to provide? It sounds like perhaps you have rendered the Viewport part inside the Dialog too?

[abhic91]

Hi, thanks for replying.

I don't understand. Should I place the Viewport outside the <ToastPrimitive.Provider>? How do I not render Viewport as part of the Dialog?

I currently have two components Modal and Toast. If I place Toast inside a component that is inside a Dialog, it will be:

<DialogPrimitive.Root open={isOpen} onOpenChange={onIsOpenChange}>
      <DialogPrimitive.Trigger asChild>{DialogTrigger}</DialogPrimitive.Trigger>
      <DialogPrimitive.Portal>
        {!noBackdrop && <StyledOverlay />}
        <StyledContent drawerPosition={drawerPosition}>
            ...
            <ToastPrimitive.Provider>
               ....
             <StyledViewport />
           </ToastPrimitive.Provider>
....

Should I export StyledViewport separately and place it outside? If yes, can you please give a rough example?

[benoitgrelard]

The Viewport needs to be close to the top of your app really, depending on what your layout is, but realistically it should be close to that. You should only render the toast bit in your dialog (where you want the toast).

// my app

<main>
  <ToastPrimitive.Provider>
   // .... your app content
   
     <StyledViewport />
  </ToastPrimitive.Provider>
<main>

// somewhere where you render your dialog:

<DialogPrimitive.Root open={isOpen} onOpenChange={onIsOpenChange}>
      <DialogPrimitive.Trigger asChild>{DialogTrigger}</DialogPrimitive.Trigger>
      <DialogPrimitive.Portal>
        {!noBackdrop && <StyledOverlay />}
        <StyledContent drawerPosition={drawerPosition}>
            ...
            <Toast>…
            </Toast>
           </ToastPrimitive.Provider>
....