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

[Ding-Fan]

headlessui/packages/@headlessui-react/src/components/dialog/dialog.tsx

Line 254 in 5af3bd4

documentElement.style.overflow = overflow

• 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

[timmaier]

This is happening for me too in vue with headless v 1.6.7.

When two modals are open and both are closed one after the other the overflow: hidden remains on the outter html tag

[timmaier]

Here's a reproduction link:
https://stackblitz.com/edit/vitejs-vite-bbesl5?file=src/App.vue

[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]

@timmaier I can't reproduce this with your stackblitz (also the url in the markdown is not filled in 😄)

Perhaps I'm doing something wrong here tho?

Screen.Recording.2022-07-28.at.09.21.04.mov

[timmaier]

Hey @thecrypticace yeah weird that's the exact use case I tested here is a screen recording of the behaviour in the stackblitz: https://stackblitz.com/edit/vitejs-vite-bbesl5?file=README.md

I'm using chrome: Version 102.0.5005.115 (Official Build) (arm64)

[timmaier]

Okay I think it seems to only happen when I hit ESC key twice to close both modals? Here's a replication stackblitz with a closeBoth handler: https://stackblitz.com/edit/vitejs-vite-7sjhss?file=src/App.vue

[thecrypticace]

Ah yep that reproduces the issue! And the ESC key closes the wrong modal first… 🤦 . Awesome thanks for the reproduction. Will take a look!

[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: #426 (comment)