[1.6.1] Transition broken with Blitz.js (Next.js)

[merlinaudio]

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

v1.6.1

What browser are you using?

Edge (Chromium)

Describe your issue

I'm using Blitz.js (a Next.js fork) with @headlessui/react@^1.6.1, and the Transition component doesn't want to transition between anything, really 😉

I've read #1309, #1304, #681, and other issues regarding the same problem, but it still doesn't work for me 😕

Setting reactStrictMode: false doesn't seem to make a difference, either

[merlinaudio]

Apologies for not adding a codesandbox link yet, will add one soon

[merlinaudio]

This is fixed with the use of Transition.Child!

Just to confirm @RobinMalfait is this usage intended with 1.6.1+?

(most props omitted for brevity)

// This doesn't work, the Dialog doesn't receive the enterFrom/enterTo and leaveFrom/leaveTo classNames
<Transition>
    <Dialog>
        {/* deprecated use of Dialog.Overlay (might not matter) */}
        <Dialog.Overlay />
        <div />
        
    </Dialog>
<Transition>

<Transition>
    <Dialog>
        {/* overlay */}
        <Transition.Child as="div" />
        <Transition.Child as={Dialog.Panel} />
    </Dialog>
<Transition>

[RobinMalfait]

If you want to coordinate multiple transitions, then you have to use the Transition.Child. The root Transition, can receive the enterFrom, enterTo, ... props but it is not required. Docs on this topic: https://headlessui.dev/react/transition#co-ordinating-multiple-transitions

Here is an example on how you can use it with a Dialog: https://headlessui.dev/react/dialog#transitions