Dialog Backdrop completely black when using controlled open state

[phynae]

Hi,

I am facing a odd problem right now. I have a shadcn dialog which is working fine, as long as it is not controlled via a state by myself. Backdrop (aka overlay) has an opacity so you can recognize the page in the background.

But as soon as i make the dialog controlled (see below) it makes the backdrop become fully black. Therefor you cannot see anything of the page in the background.

const [isDialogOpen, setIsDialogOpen] = useState(false);


<Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
    {/*tried adding this overlay component but without success (does also not work without)*/}
    <DialogOverlay className="fixed inset-0 bg-black/50 backdrop-blur-sm" />
    <Button asChild={true}>
        <DialogTrigger>
            <LucideUserPen />
            Edit
        </DialogTrigger>
    </Button>
    <DialogContent>
        <DialogHeader>
            <DialogTitle>Are you absolutely sure? {user.userName}</DialogTitle>
            <DialogDescription>
                This action cannot be undone. This will permanently delete your account
                and remove your data from our servers.
            </DialogDescription>
        </DialogHeader>
    </DialogContent>
</Dialog>

I would greatly appreciate any help! Thansk in advance!

Phynae

[phynae]

For other people, that face the same/similar issue, here's the solution:

I was using one single boolean state that was passed to many dialog's open-flags. This resulted in many dialogs overlaying each other. Therefore i assume the overlay to get darker and darker by each dialog.

You could not see that from the code snippet i provided.

[maximeclaisse]

Thank you ! I was facing the same issue.

[SantoshPhaiju]

How do you solved your issue?

[SantoshPhaiju]

I am currently facing the same issue, and cannot figure out what is causing that issue and how to solve it?

[maximeclaisse]

If you put the dialog into a loop to render several components, you can try :

• To extract the dialog from the multi rendered component
• To trigger the controlled state of the dialog with something that is unique for each component