[BUG] Dialog Box unexpectedly close when Toaster auto close timer run out

[hazamashoken]

Describe the bug

When Dialog and Toaster are open together. Auto close toaster force dialog to close too.

To Reproduce

1. Having a Dialog and Toaster open together.
2. Wait until Toaster automatically close
3. Dialog will be force close together with Toaster

Expected behavior

• Toaster should close without effecting Dialog Box

Desktop

• OS: Window
• Browser: Chrome

[dBianchii]

Can you provide the TSX/JSX for this issue?

[hazamashoken]

@dBianchii Sorry for the late reply here's the link to the stackblitz replica of the part I found the bug https://stackblitz.com/edit/stackblitz-starters-vegkfd?file=app%2Fcomponents%2FConfirmDialog.tsx

Setup Step:

1. cd app
2. npm install

Step to reproduce:

1. click on either button on the datatable, this will open a Dialog for open and AlertDialog for CONFIRM
2. click on any button at the DialogFooter, this will close the Modal and open a Toast
3. before Toast disappears, click on any of the button on the datatable again.
4. wait until the toaster timer run out for it to disappear, this will close the toast and also the Dialog

Note

• This only happen for Dialog and AlertDialog that is the children of the Datatable, it will not effect the Dialog outside of Datatable.

• Most of the code came from the https://ui.shadcn.com/ example datatable and base components

[Malin88]

I have the same problem. Toast on closing also closes the Dialog and DropDownMenu :/

[KarthikeyaManthri]

Facing similar issue with Sheet component and Toast. Whenever Toast is auto closing, it closes Sheet component too. If anyone has any workaround for this kindly share.

[guilleBFG]

I was able to achieve a dialog using parallel and intercepting routes on nextjs, you can use the transaction to a link you want on the page and use the parallel route to show the modal. this way the toast does not close the dialog

[felipe-ff]

I have a similar issue, when I click close icon on the toast, the dialog also closes.

[lcfd]

Same issue with Sheet and Toast. Is there a way to make them work together?

[lefelys]

I fixed it by removing all const { toasts } = useToast(); from the code (except the one from shadcn's component itself) and use toast exported by use-toast.ts . If you use <Toaster /> in Layout as docs suggest - const { toasts } = useToast(); is already called there (and toast's state is initialized) - so toast will work globally.

The problem with calling useToast() inside components - I think it can trigger rerender and child dialog closing.

If this solution is correct - docs must be updated I think.

[flaviocopes]

I had this issue, a portion of the page refreshed when calling toast(), and when it got dismissed.

Fixed by using @lefelys suggestion, removed

import { useToast } from "@/components/ui/use-toast"
//...
const { toast } = useToast()

and instead used the toast object from

import { toast } from "@/components/ui/use-toast"

[Athrun-Judah]

I have the same problem

[hazamashoken]

Shadcn provides another toast component, sonner, that can replace this toaster. It fixes the problem mentioned above.

[Athrun-Judah]

Thanks for your reply, but I have another question. When I use sonner , the color of sonner's status such as success or error is not shown.Do I need to set something up in sonner?

[hazamashoken]

@Athrun-Judah that would be the correct default behavior for sonner toaster, add richColors to the Toaster props to enable rich color. see the official documentation for more info https://sonner.emilkowal.ski/

[elfaq]

i have the same problem

[yourcasualdev]

I had this issue, a portion of the page refreshed when calling toast(), and when it got dismissed.

Fixed by using @lefelys suggestion, removed

import { useToast } from "@/components/ui/use-toast"
//...
const { toast } = useToast()

and instead used the toast object from

import { toast } from "@/components/ui/use-toast"

A portion on my page is refreshes too and its super annoying.

And replacing custom hook with import didn't solved the issue

[tranlehaiquan]

Hi I have the same problem when using Toast inside Sheet. I also tried to replace useToast with toast from "@/components/ui/use-toast" but it not working for me.

[tranlehaiquan]

I solved this problem by follow: https://github.com/radix-ui/primitives/issues/2690#issuecomment-1945449832

In sheet.tsx add onPointerDownOutside for SheetContent

onPointerDownOutside={(e) => {
        // don't dismiss dialog when clicking inside the toast
        if (
          e.target instanceof Element &&
          e.target.closest('[data-toast]')
        ) {
          e.preventDefault();
        }
        // if you are wrapping this component like shadcn, also call the caller's onPointerDownOutside method
        // onPointerDownOutside?.(e);
      }}

Add data-toast in ToastViewport

[yourcasualdev]

I just migrated all toasts with sonner component. Work fine and sonner is better than toast for me.

[shadcn]

This issue has been automatically closed because it received no activity for a while. If you think it was closed by accident, please leave a comment. Thank you.