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

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.

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

[MTaghinia]

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