Initially clicking on the Dialog component is that it closes

[incpo]

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

v1.7.17

What browser are you using?
Chrome, Brave

Reproduction URL
https://github.com/incpo/22-08-2023-headless-ui-modal-1.7.17
https://stackblitz.com/edit/stackblitz-starters-cyufaw

Describe your issue

Hello developer team!

One problem that occurs when initially clicking on the dialog component is that it closes immediately, but subsequent clicks work fine. This bug has been identified to exist from version 1.7.14 to version 1.7.15, possibly due to the implementation of nested portals.

However, it has been observed that when the <Dialog.Title> component is placed inside the component, the bug disappears.

I would like to create a pull request to address the bug but I can't, it is mentioned in the Contributing documentation that changes should be made for both React and Vue versions, so I create an issue :)

[thecrypticace]

Hey, thanks for reporting this one! This should be fixed by #2697, and will be available in the next release.

You can try it before then using our insiders build (may take a few minutes to publish to NPM):

• npm install @headlessui/react@insiders.