Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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 (link is outdated now)

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.

Issue Analytics

State:
Created a year ago
Reactions:10
Comments:7 (1 by maintainers)

Top GitHub Comments

3reactions

RobinMalfaitcommented, Sep 1, 2022

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

2reactions

radiyloncommented, Aug 5, 2022

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

Top Results From Across the Web

Transition - Headless UI

The Transition component lets you add enter/leave transitions to conditionally rendered elements, using CSS classes to control the actual transition styles ...

Invoke a callback at the end of a transition - Stack Overflow

Hi , the first link to stack/group bar chart points to an Observable notebook which doesn't use any .each event listener, nor the...

Transition | Vue.js

Vue offers two built-in components that can help work with transitions and animations in response to changing state: <Transition> for applying animations ...

Preparing for Transition from Early Intervention to an IEP

You can learn new skills and strategies that may help with future transitions. Moving from “family focus” to a “child focus”. Under the...

@headlessui/react - npm

The Transition component lets you add enter/leave transitions to conditionally rendered elements, using CSS classes to control the actual transition styles ...