Alert Dialog inside the Dialog - Overlay missing - Shadcn Base UI variant

[gopalg-dev]

I am trying to render a Alert dialog inside a Modal component. And when the Alert dialog is open i am not seeing the overlay effect behind the alert dialog.

what am i doing wrong here.
Refer the below image for a clear understanding.
Expected: I want the overlay to show behind the Alert dialog as well

[initial-d]

This usually happens because the second modal is being rendered inside the first dialog's stacking/portal context, or because only the alert dialog content is mounted and its overlay is not.

For nested dialogs, I would avoid rendering the AlertDialog as a child of the inner DialogContent. Keep the two roots as siblings and control the alert with state:

<Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
  <DialogContent>
    <Button onClick={() => setAlertOpen(true)}>Delete</Button>
  </DialogContent>
</Dialog>

<AlertDialog open={alertOpen} onOpenChange={setAlertOpen}>
  <AlertDialogContent>
    ...
  </AlertDialogContent>
</AlertDialog>

Also check that your alert dialog component actually includes its overlay. In the shadcn-style components it is normally separate from the content, for example:

<AlertDialogPortal>
  <AlertDialogOverlay />
  <AlertDialogContent>...</AlertDialogContent>
</AlertDialogPortal>

If the overlay exists but is hidden behind the original dialog, it is a z-index issue. The alert overlay/content should be above the base dialog overlay/content, e.g. alert overlay/content using a higher z-index than the dialog layer.

The main idea is: do not rely on the alert dialog being nested visually inside the first dialog. Let both modals portal to the document/root layer, and make the alert layer higher than the normal dialog layer.