TransitionRoot with :unmount="false" + Dialog causes scroll lock despite :show="false"

[chankaryik]

What package within Headless UI are you using?

@headlessui/vue

What version of that package are you using?

v1.7.12

What browser are you using?

Chrome 111.0.5563.147

Reproduction URL

https://stackblitz.com/edit/nuxt-starter-4drkbk?file=src/pages/index.vue

Describe your issue

Based on the reproduction sandbox, when :unmount="false" is applied to TransitionRoot, overflow:hidden and padding-right:0px will be added to HTML element despite the :show prop is receiving false value from isOpen ref.

Issue #1676 actually mentioned about the same issue, and should be fixed by PR #1681, but I'm still experiencing the same issue at version 1.7.12.

Also, I found out that #2365 did mention that :unmount="false" only makes sense by itself when as is not Fragment, therefore I tried to remove as="template" from TransitionRoot, and now the Dialog will appear right away and flicker, and the dialog is not closable because isOpen is still false.

All I wanna achieve is make sure the dialog is mounted after the page is loaded, but at the same time TransitionRoot should not show the dialog right away and lock the scroll, and the dialog can be opened normally and doesn't unmount when it's closed.

[thecrypticace]

Hi! Thanks for reporting this one. I've merged a fix for this in #2422 which will be available in the next release. If you want you can try it before then using our insiders build:

npm install @headlessui/vue@insiders

Appreciate it! ✨

[chankaryik]

Hi, thanks for the fix.
It's working now. Appreciate it ✨