[Bug] Dialog.Overlay doesn't close together with Dialog on latest main commit (591b328)

What package within Headless UI are you using?

@headlessui/react@insiders.591b328

What browser are you using?

Firefox

Describe your issue

Not sure if it’s only affecting me, but I’m using the current insiders version and Dialog.Overlay stays visible even when you close the Dialog it belongs to, blocking inputs to the underlying page. I reverted to commit ab6310 and this issue went away, but it also resulted in issues with using datepickers in modals (i.e. the fix that was supposed to come with this pull request doesn’t work, and clicking inside a datepicker in a dialog will cause the dialog to close. https://github.com/tailwindlabs/headlessui/pull/1268).

EDIT: I have come to realise that strangely, this bug only happens IF you have an opacity class on the Dialog.Overlay component. For example the overlay closes if it looks like that:

<Dialog.Overlay className="fixed inset-0 bg-black"/>

but does NOT close if it’s like that:

<Dialog.Overlay className="fixed inset-0 bg-black opacity-30"/>

I’m using a Transition for this overlay just like in this codesandbox that was posted when fixing #432

After some further testing, removing the surrounding <Transition> tag fixes the issue, so there’s probably some conflict with transitioning the opacity.

[spvn]

Will create one when I’m free, but just FYI the sample code for Dialog on the website will break. I’m referring to the sample dialog at the top of this page: https://headlessui.dev/react/dialog

Removing as={Fragment} from Dialog.Overlay’s <Transition.Child> fixes the problem

[StwardPC]

Removing as={Fragment} from Dialog.Overlay’s <Transition.Child> fixes the problem

This solved the issue on my end.