Open
Description
🙋 Documentation Request
I've been trying to use several dialog components nested inside each other.
I've noticed through trial and error that without a <ModalOverlay/>
in the mix, this simply doesn't work at all: opening one dialog opens them all simultaneously, and once open they can't be closed again.
My code now resembles this, which works:
<DialogTrigger>
<Button>Open me!</Button>
<ModalOverlay>
<Modal>
<Dialog>
{({ close }) => (
<>
<button onClick={close}>Close</button>
<h2>Example dialog</h2>
Example content
<DialogTrigger>
<Button>Open me!</Button>
<ModalOverlay>
<Modal>
<Dialog>
{({ close }) => (
<>
<button onClick={close}>Close</button>
<h2>Example dialog</h2>
Example content
</>
)}
</Dialog>
</Modal>
</ModalOverlay>
</DialogTrigger>
</>
)}
</Dialog>
</Modal>
</ModalOverlay>
</DialogTrigger>
I'm not sure why including <ModalOverlay/>
has this effect, so it could be worth a note in the docs on how to properly orchestrate nested dialogs?
🧢 Your Company/Team
No response