fix: prevent pointer events on Sonner toast when clicking outside the dialog

MiaoMint · MiaoMint · commit 81b5c7156891 · 2026-01-13T02:29:58.000+08:00
diff --git a/frontend/src/components/ui/dialog.tsx b/frontend/src/components/ui/dialog.tsx
@@ -60,6 +60,14 @@ function DialogContent({
           className
         )}
         {...props}
+        onPointerDownOutside={(e) => {
+          if (
+            e.target instanceof Element &&
+            e.target.closest("[data-sonner-toast]")
+          ) {
+            e.preventDefault();
+          }
+        }}
       >
         {children}
         {showCloseButton && (
diff --git a/frontend/src/components/ui/sonner.tsx b/frontend/src/components/ui/sonner.tsx
@@ -1,14 +1,18 @@
-import { useTheme } from "next-themes"
+
+"use client";
+
+import { useTheme } from "next-themes";
+import { createPortal } from 'react-dom';
 import { Toaster as Sonner, type ToasterProps } from "sonner"
 import { CircleCheckIcon, InfoIcon, TriangleAlertIcon, OctagonXIcon, Loader2Icon } from "lucide-react"
 
 const Toaster = ({ ...props }: ToasterProps) => {
   const { theme = "system" } = useTheme()
 
-  return (
+  const toasterContent = (
     <Sonner
       theme={theme as ToasterProps["theme"]}
-      className="toaster group"
+      className="toaster group pointer-events-auto"
       icons={{
         success: (
           <CircleCheckIcon className="size-4" />
@@ -41,7 +45,11 @@ const Toaster = ({ ...props }: ToasterProps) => {
       }}
       {...props}
     />
-  )
+  );
+
+
+  return createPortal(toasterContent, document.body);
+
 }
 
 export { Toaster }
