Skip to content

Using nested dialogs seems to depend on including a custom <ModalOverlay/> #6531

Open
@jhackett1

Description

@jhackett1

🙋 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

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't workingdocumentationImprovements or additions to documentation

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions