How should we handle nested modals?

[marceloclp]

I would like to use dialogs (or modals) to create a SPA-like experience. To illustrate what I want to build, take a look at the following code:

const MySPALikeModal = () => (
  <Dialog.Root>
    <Dialog.Trigger>Open modal 1</Dialog.Trigger>
    <Dialog.Content>
      {/* nesting a second modal inside the first one */}
      <Dialog.Root>
        <Dialog.Trigger>Open modal 2</Dialog.Trigger>
        {/* we could nest as many modals as needed */}
        <Dialog.Content>...</Dialog.Content>
      </Dialog.Root>
    </Dialog.Content>
  </Dialog.Root>
)

Notice that modals are nested within each other.

In short, a group of modals (or dialogs) should be treated as a single modal. That means:

1. it only animates the opening (overlay fade in, etc) on the first modal of the group;
2. it only animates the closing (overlay fade out, etc) when the last modal is closed;
3. you can pop back to the previous modal (using some sort of history management);

The main issue with this is that once we open modal 2, modal 1 will unmount which means modal 2 doesn't exist on the tree anymore, becoming unable to be rendered. There are ways to overcome this issue, like pushing the modal into state and rendering it somewhere else:

const Modal2 = () => {...}

const Modal1 = ({ pushModal, open, onOpenChange }) => (
  <Dialog.Root open={open} onOpenChange={onOpenChange}>
    <Dialog.Content>
     <button onClick={() => pushModal(<Modal2 />)}>
        Open modal 2
     </button>
    </Dialog.Content>
  </Dialog.Root>
)

const MySPALikeModal = () => {
  const [history, setHistory] = useState([])

  const pushModal = (modal) => setHistory(h => [...h, modal])

  return (
    <div>
     {/* entry point of my modal group */}
      <button onClick={() => push(<Modal1 pushModal={pushModal} />)}>
        Open modal 1
      </button>
      {/* do some logic to decide which modal to show */}
      {history.map((modal, i) => cloneElement(modal, { open: i === history.length - 1 })}
    </div>
  )
}

Another way is to not unmount the modal, and just hide it with CSS, but this could cause a lot of other issues that I would like to avoid.

However, I am not sure this is the correct approach. It feels over engineered, and now I have to fight back against the trigger no longer being focused back automatically, etc, etc, etc.

Another simpler solution is to simply replace the content of the dialog. My knowledge of accessibility is somewhat limited, so I simply assumed that to get the full accessibility benefits I needed to render a modal for each content. Is this assumption correct?

[joaom00]

Something like this? https://codesandbox.io/s/distracted-bell-4kz878?file=/App.js

[marceloclp]

Yes, something like that, but a group of modals are treated as a single modal, so only one modal open at a time, and when travelling between modals only the content is replaced (no animations)