Transition calls `afterLeave` callback too early when using `Transition.Child`

[dcastil]

trafficstars

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

v1.6.0

What browser are you using?

Chrome

Reproduction URL

https://codesandbox.io/s/headlessui-transition-bug-afterleave-3k435m?file=/src/App.tsx:589-1336

Describe your issue

In v1.5.0 the afterLeave call of the Transition component was called after all Transition.Child components finished their leave animation. But now the Transition component calls this callback immediately and doesn't wait for animations of its child transition.

I rely on the afterLeave callback to know when it is safe to unmount a component with an exit animation.

[pvandamme]

Exact same problem with afterEnter

[stevebauman]

Yea version >= v1.6.0 has broken exit transitions in my transitions in Vue as well 👍

[JamieGarcia123]

I am not getting my leaveFrom transition React ^17 TW ^3 // using sass integration as well headlessUI ^1.5.0 next ^12

[gregghawes]

Also facing this issue

[radiylon]

Looks like they're actively working on it! https://github.com/tailwindlabs/headlessui/pull/1585

[RobinMalfait]

This should be fixed by #1803, and will be available in the next release.

You can already try it using npm install @headlessui/react@insiders.

Here is an updated CodeSandbox with the latest insiders version: https://codesandbox.io/s/headlessui-transition-bug-afterleave-forked-ukknut?file=/src/App.tsx

[dcastil]

Can confirm that it works. Thanks! 🙏

[zipper]

I'm now experiencing the very same issue in @headlessui/vue 1.7.9 🤔