[Bug]: Multiple/nested Dialog instances bugs

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

1.0.0, 1.0.0-ef31bbe

What browser are you using?

Chrome MacOs, Chrome Android, Safari iOS

Reproduction repository

https://codesandbox.io/s/headlessui-dialog-multiple-modals-bugs-sq7sn?file=/pages/index.js

Describe your issue

First of all, thanks for great library!

In complex app sometimes content of dialog can open another one… I played around dialog component and find some issues:

• scroll jumping, described here: #421 (and I found fix… maybe we should describe this behaviour in documentation)
• if dialog open another dialog: FocusTrap - can handle focus only if autoFocusRef provided (compare pressing "Open 1" -> "Open 2" and "Open 1" -> "Open 3")
• when 2 or more dialogs is open - the are no way to close only one of them

[RobinMalfait]

Hey! Thank you for your bug report! Much appreciated! 🙏

When you want nested Modals, then you should also nest it in the component tree. This allows us to create a stacking context so that when you press esc that only the top most Dialog gets closed.

Dialogs have this feature where all other content is inert, meaning 2 open Dialogs at the same time is not possible when they are rendered as children. But the nesting should fix this.

Here is an example: https://codesandbox.io/s/headlessui-dialog-multiple-modals-bugs-forked-o2ykb?file=/pages/index.js

[RobinMalfait]

Good catch @sveisvei!

I saw it too when I made that example. Have a fix already: https://github.com/tailwindlabs/headlessui/pull/430

Edit: Updated the codesandbox with the dev build of Headless UI. You can already try it using npm install @headlessui/react@dev or yarn add @headlessui/react@dev.