Swapping Dialog elements results in second Dialog not appearing (Vue)

[r-thomson]

What package within Headless UI are you using?

@headlessui/vue

What version of that package are you using?

1.7.17

What browser are you using?

Firefox 122, Safari 17.2

Reproduction URL

https://codesandbox.io/p/devbox/weathered-forest-v3lvy2

Describe your issue

I am using a pattern where modals are opened and closed with v-if (for reasons why, see https://github.com/tailwindlabs/headlessui/discussions/2027).

<Dialog v-if="state === 1" open />
<Dialog v-if="state === 2" open />

One thing that I'm doing in several places is closing one modal while simultaneously opening another one (e.g. state++). As of v1.7.17, when trying to do that the second modal doesn't appear. See the linked reproduction for an example.

I can confirm that this behavior is not present in v1.7.16.

[SpiritusDeos]

Hi, we still have the issue in the new versions of headlessUI v1.7.18, is the issue is planned to be fix ?

[JapSeyz]

I am experiencing this issue as well. It is seemingly coming from https://github.com/tailwindlabs/headlessui/pull/2700

[MacyBim]

I am experiencing the same issue as well, or at least it seems to have the same cause.

I am not using v-if, but when I am on a page where a Dialog can be opened (so the <div id="headlessui-portal-root">..</div> is set in the body) -> then navigating (using vue-router 4.3.0) to the next page that also has a Dialog on the page, it gives an error when trying to open the Dialog because <div id="headlessui-portal-root">..</div> is not set in this next page.

After debugging I found out that it is definitely caused by version 1.7.17 and in https://github.com/tailwindlabs/headlessui/pull/2700

[thecrypticace]

Sorry about that! One of our changes cause a timing issue when switching dialogs in the same "tick". Fixed in @headlessui/vue v1.7.21

npm install @headlessui/vue@latest