I’m using Radix UI Dialog (via ShadCN UI) in my Next.js 13+ project.
Everything works fine when I open the dialog — the overlay (bg-black/80) appears as expected and blocks the background.
However, if I switch browser tabs (or minimize the Chrome window) and then return to the tab again,
the black overlay disappears, but the dialog content stays visible and interactive.
So it looks like the dialog is floating on the screen without any dimmed background.
This only happens after tab focus changes — not when opening or closing normally.
and i use it like this
<Dialog open={open} onOpenChange={setOpen}>
<DialogTrigger asChild>
<button onClick={() => setOpen(true)}>Open Dialog</button>
</DialogTrigger>
<DialogContent>
<p>Dialog content here</p>
</DialogContent>
</Dialog>
and my dialog.tsx is like this
"use client"
import * as React from "react"
import * as DialogPrimitive from "@radix-ui/react-dialog"
import { X } from "lucide-react"
import { cn } from "@/lib/utils"
const Dialog = ({ children, ...props }: React.ComponentPropsWithoutRef<typeof DialogPrimitive.Root>) => (
<DialogPrimitive.Root {...props}>{children}</DialogPrimitive.Root>
)
const DialogTrigger = DialogPrimitive.Trigger
const DialogPortal = DialogPrimitive.Portal
const DialogOverlay = React.forwardRef<
React.ElementRef<typeof DialogPrimitive.Overlay>,
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
>(({ className, ...props }, ref) => (
<DialogPrimitive.Overlay
ref={ref}
className={cn(
"fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out",
className
)}
{...props}
/>
))
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
const DialogContent = React.forwardRef<
React.ElementRef<typeof DialogPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
>(({ className, children, ...props }, ref) => (
<DialogPortal>
<DialogOverlay />
<DialogPrimitive.Content
ref={ref}
className={cn(
"fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 border bg-background p-6 sm:rounded-lg shadow-lg",
className
)}
{...props}
>
{children}
<DialogPrimitive.Close className="absolute right-4 top-4">
<X className="h-4 w-4" />
</DialogPrimitive.Close>
</DialogPrimitive.Content>
</DialogPortal>
))
DialogContent.displayName = DialogPrimitive.Content.displayName
export { Dialog, DialogTrigger, DialogContent }
and when i try to close the dialog whose overlay is already removed then it show me this error
Error: Failed to execute ‘removeChild’ on ‘Node’: The node to be
removed is not a child of this node.
