Transition with unmount

[arkrosclou]

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

v1.6.4

What browser are you using?

Chrome

Reproduction URL

repo: https://github.com/ARkrOSClou/headlessui_ref_issue code: https://github.com/ARkrOSClou/headlessui_ref_issue/blob/main/src/App.js build: https://headlessui-ref-issue.vercel.app/

Describe your issue

Transition component with unmount prop does not play animation when called from a completely inactive state as expected, but if another animation is played in parallel - it works fine

https://www.screencast.com/t/9R5UjHcJaK7K

[ellemedit]

In addition, it seems that doesn't fire afterLeave event handler.

[stevebauman]

I've stayed locked to v1.5.0 which seems to be the most stable of all the versions. All versions there-after seem to have regression bugs 😢

This bug occurs in v1.6.7 as well.

[radiylon]

@ARkrOSClou @Beingbook maybe this is the fix incoming https://github.com/tailwindlabs/headlessui/pull/1118

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

[arkrosclou]

@RobinMalfait, i was update test build and now it looks the same actually

[RobinMalfait]

@ARkrOSClou wait so that's what you would expect right or am I still missing something since it still has the word "broken" in there? 😅

[arkrosclou]

@RobinMalfait https://www.screencast.com/t/0lcK5zXlcpcP it still instantly jumps, no easing

[RobinMalfait]

Can you provide me some more information about which Chrome version you are using and your OS or any information that I could use to try and debug this?

This is what I see on Chrome (Version 104.0.5112.101 (Official Build) (arm64)) and Safari (Version 15.6.1 (17613.3.9.1.16))

• Top is Chrome
• Bottom is Safari

https://user-images.githubusercontent.com/1834413/188120443-20a94390-2e06-408b-a7bb-39f480f09ed2.mov

[RobinMalfait]

After refreshing my browser a lot of times, I could reproduce it about 1-2% of the time in Chrome and was still very random. Could not reproduce it in Safari at all, I could reproduce it in Firefox pretty consistently.

But I think I found a solution here #1811

@ARkrOSClou can you install the latest insiders version and see if that works on your machine now?

[arkrosclou]

@RobinMalfait thanks, after update package all works fine, probably in previous insiders version 0.0.0-insiders.a98e55c there was not the necessary fix yet

[RobinMalfait]

Perfect, I'm really happy to read this. In a previous version we did some important updates to Transition, but this particular bug was related to the unmount={false} directly.

Glad it's fixed now! Thank you for testing.

[alexmillman23]

I'm still having this issue on 1.7.13 (Vue.js).

[Tkaixiang]

Still having this issue as of 1.7.18 (React)

[cmhampton-meridian]

Still having this issue as of 1.7.18 (React)

I can confirm the same issue in 1.7.18.