[React, v1.6.7] Transitions not working

[mvanroon]

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

Version tried:

• insiders (a294fdb)
• 1.6.6
• 1.6.5
• 1.6.4
• 1.5.*
• 1.4.*

What browser are you using?

Chrome

Reproduction URL

https://codesandbox.io/embed/tailwind-css-and-react-forked-wsiu2h

Describe your issue

I've closely followed the example code on https://headlessui.com/react/dialog#transitions but I can't seem to get dialog transition to work. I thought #1664 might fix the problem, but installing the latest insiders version does not fix the problem.

[RobinMalfait]

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

This should already work, here is an example https://codesandbox.io/s/tailwind-css-and-react-forked-wlrz3t?file=/src/App.js

The missing piece here is the as={Fragment}, this is because otherwise the transition component renders a div, using as={Fragment} it will try and transition the first child. This is important because the Dialog is rendered in a different spot via a portal. Let's look at the final HTML to give you a better idea:

<!-- Transition div -->
<div class="transition opacity-0">
</div>

<!-- Dialog div -->
<div></div>

As you can see, the Dialog and Transition are disconnected, so putting classes on the Transition doesn't really happen because it doesn't have children.

But if you put an as={Fragment}, then it will use the first child in the React tree, which is the dialog. This gives us better results:

<!-- Dialog div -->
<div class="transition opacity-0"></div>

I'll update the docs to put the as={Fragment} there to reduce confusion.

[mvanroon]

Thank you so much for your clarification! My apologies for marking this as a bug ;)