[bug] weird(cannot) scroll after two dialog intersect showing

https://github.com/tailwindlabs/headlessui/blob/5af3bd4b7164a0205ac70c179d8e9651afbb0a72/packages/%40headlessui-react/src/components/dialog/dialog.tsx#L254

• DialogA:LoadingMask shows
• do some fetching
• done fetching
• DialogB:Confirmation shows
• DialogA:LoadingMask hides
  • expected: html style has overflow:hidden
  • actually: html style is empty
• click confirm
• DialogB:Confirmation hides
  • expected: html style is empty
  • actually: html style has overflow:hidden

[Ding-Fan]

I’m using this as a workaround

        // prevent scroll bug
        // https://github.com/tailwindlabs/headlessui/issues/1698
        const HTMLDOM = document.querySelector('html')

        if (HTMLDOM) {
          // https://stackoverflow.com/a/67384208/6236633
          // HTMLDOM.style = ''
          HTMLDOM.setAttribute('style', '')
        }

example:

//
// utils.ts
//
  export const preventScrollBug = () => {
    // prevent scroll bug
    // https://github.com/tailwindlabs/headlessui/issues/1698
    const HTMLDOM = document.querySelector('html')

    // console.log('html dom', HTMLDOM)

    if (HTMLDOM) {
      // https://stackoverflow.com/a/67384208/6236633
      // HTMLDOM.style = ''
      HTMLDOM.setAttribute('style', '')
    }
  }

//
// my custom loading mask
//
/* ... */
    <Transition appear show={showMask}
      afterLeave={() => {
        setTimeout(() => {
          Utils.preventScrollBug()
        })
      }}
/* ... */

This will make sure the html can scroll

[thecrypticace]

Okay, I talked with @RobinMalfait some and we actually don’t support multiple open sibling dialogs. It is definitely something we want to support but there will likely be more we have to change to properly support that. In the short term you might be able to work around the issue by nesting the dialogs/modals inside one another as children. This allows us to properly restore state. This is also why the ESC closes the first modal first and not the second one.

I’m closing this for now (sorry!) but will keep it on the mind for when we do eventually find a way to properly support multiple open dialogs that are siblings.

Here’s a comment from an earlier issue with some examples with nested versus sibling dialogs: https://github.com/tailwindlabs/headlessui/issues/426#issuecomment-1059185316