[Bug]: Enter transitions are janky with Listbox (rendered within Portal and Popper)

[evangeline]

What package within Headless UI are you using?

@headlessui/react

What version of that package are you using?

v1.2.0

What browser are you using?

Chrome

Reproduction repository

https://codesandbox.io/s/headlessuireact-listbox-example-forked-wfwff?file=/src/Select.js

Describe your issue

Transition's animation is quite janky on enter. I've set the Transition enter and exit animations to be inverse of each other:

                      enter="transition ease-out duration-500"
                      enterFrom="transform opacity-0 scale-0"
                      enterTo="transform opacity-100 scale-100"
                      leave="transition ease-in duration-500"
                      leaveFrom="transform opacity-100 scale-100"
                      leaveTo="transform opacity-0 scale-0"

The exit animation works as expected, but the enter animation looks janky depending on whether the focus is on the listbox button or elsewhere.

[edustef]

Same issue for me. I don't know if it works for you but for me it doesn't work at all even with duration-1000. If you look at the first example here https://headlessui.dev/react/listbox in code they have transition leave but transition enter is missing, so I'm wondering if it even works at all.

[zdb999]

I'm having the same issue. The Transition component's "enter" in general seems to be very inconsistent.

[syropian]

Same issue here, enter animation is super janky, exit animation works fine.

Repro: https://stackblitz.com/edit/react-9arfgj?file=src%2Fsheet.js

[livkiss]

I've stumbled upon this today, and it is the same for me - enter transition is not working at all in Chrome and Firefox when using Listbox. After further debugging, I've isolated two cases:

1. Doing practically the same, but with a Menu component instead of Listbox does work in Chrome and Firefox. Maybe the focus process when opening somehow cancels the animation in those browsers or something along those lines. See https://codesandbox.io/s/headlessui-react-transition-menu-popper-example-forked-pnj9b

2. When running those things in Safari, it also works with Listbox ... I created another example that shows Listboxes with increasing complexity (Listbox + Transition, Listbox + Transition + popper.js, Listbox + Transition + popper.js + Portal). See https://codesandbox.io/s/headlessui-react-listbox-example-forked-6m10w

I've used the current version of @headlessui/react (1.4.0)

[sebmellen]

I was having the same issue with Listbox, but somehow I'm now having the issue across all transitions.

It's rather disappointing as I'd worked hard to use this transition component in a project and I'm now noticing a slew of janky inconsistencies all over the place (all for the enter animation).

[zachweinberg]

+1
Enter transitions do not work on Chrome

[RobinMalfait]

Hey! Thank you for your bug report!
Much appreciated! 🙏

Debugged the issues y'all are having and I'm pretty sure I figured it out in #1218. Still doing a few tests to verify but that PR should fix these issues. Will report back once I'm sure.

[MTaghinia]

The enter transition does not work for Listbox with version 1.6.3. The leave transition works smoothly.

[IgorKowalczyk]

The enter transition does not work for Listbox with version 1.6.3. The leave transition works smoothly.

I also have this problem, animations don't work even after downgrading headlessui

[MTaghinia]

The enter transition does not work for Listbox with version 1.6.3. The leave transition works smoothly.

I also have this problem, animations don't work even after downgrading headlessui

It's now working smoothly in 1.6.4.
Thanks for the update.