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 does not call `afterLeave` when using nested 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.7.2

What browser are you using?

Chrome

Reproduction URL

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

Open link above
Open console of Code Sandbox
Click on the “Click to transition” button
Observe that console.log('unmount') in afterLeave callback never gets called.

Describe your issue

When using a nested Transition.Child within a Transition component, the afterLeave callback from the Transition component doesn’t get called when the exit transition ends.

Issue Analytics

State:
Created a year ago
Comments:5 (2 by maintainers)

Top GitHub Comments

1reaction

RobinMalfaitcommented, Oct 3, 2022

Hey!

Going to close this one for now. If you can reproduce the issue with the Transition on the outside then feel free to open a new issue with a reproduction repo / CodeSandbox attached. We can also re-open this issue, but interactions on older PRs/issues tend to get lost quicker.

I hope you figured it out for your use case 💪

0reactions

dcastilcommented, Sep 21, 2022

The open prop of the DialogRoot controls its focus trap, scroll lock, etc. which is why it’s in sync with the show prop of the Transition component. All those things should get disabled at the moment the exit transition starts. It doesn’t unmount any components because of the forceMount prop on all the Radix components (that’s the intended way to use Radix with close animations).

I’ll try to put the Transition on the outside and report back.

Top Results From Across the Web

Transition calls `afterLeave` callback too early when ... - GitHub

Child components finished their leave animation. But now the Transition component calls this callback immediately and doesn't wait for ...

How to simultaneously transition colour of nested children

So, the real issue is that the transition-duration property seems to be additive for children, see how slow it takes to remove the...

Transition | Vue.js

Although the transition classes are only applied to the direct child element in <Transition> , we can transition nested elements using nested CSS...

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 in ...

Nested div CSS transition not working - CodeProject

I have a navigation bar with a dropdown on one of the nav_items. Each nav_item has a CSS transition on its color property,...