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

[spvn]

What package within Headless UI are you using?

@headlessui/[email protected]

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. #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 tag fixes the issue, so there's probably some conflict with transitioning the opacity.

[RobinMalfait]

Hey! Thank you for your bug report!
Much appreciated! 🙏

Please provide a reproduction repo or CodeSandbox so that we can take a look.

[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

[grefrit]

Can confirm that dialog doesn't close on 591b328 when using with Transition component, but it's working in b4a4e0b

EDIT: Really strange that I reverted to b4a4e0b and Dialog start working properly, but I'm using Popover in Dialog and that Popover actually inside Portal and when I'm clicking on the Popover, Dialog just closes(in 591b328 Popover is working properly, in b4a4e0b Dialog is working properly) :)

[RobinMalfait]

@grefrit can you create a reproduction repo / CodeSandbox and share it?

[RobinMalfait]

Hey!

Going to close this for now, if you still have this issue please create a new issue with a reproduction repo / CodeSandbox attached.

[stupeyca]

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

This solved the issue on my end.