Dialog adds unnecessary overflow:hidden to HTML root element even if it's hidden initially

[ItsRyanWu]

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

1.6.6

What browser are you using?

Chrome, Safari, etc

Reproduction URL

https://codesandbox.io/s/determined-ardinghelli-ftl8nn?file=/src/App.js

Describe your issue

When combining Dialog and Transition components together and declare unmount: false then the Dialog will always add overflow:hidden to HTML root element when users are first landed on the page and result in a non-scrollable page, which is confusing and not expected. After manually opening and closing the Dialog the overflow won't be added in wrong cases.

[thecrypticace]

Hey, thanks for reporting this!

This has been fixed by #1681, and will be available in the next release!

You can try it by using our insiders build (may take a couple of minutes to publish):

• npm install @headlessui/react@insiders.
• npm install @headlessui/vue@insiders.