Transition events are being dispatched multiple times

[amiranagram]

What package within Headless UI are you using?

@headlessui/vue

What version of that package are you using?

v1.7.9

What browser are you using?

Chromium / Firefox

Reproduction URL

https://codesandbox.io/p/sandbox/pensive-lake-wquxcm

Describe your issue

Transition events when listened on the TransitionRoot component are being dispatched multiple times. 1 from the component itself, and each time a TransitionChild component is used inside a TransitionRoot.

Check the console of my code sandbox, where I logged what happens with after-leave event.

[zipper]

I have a similar issue, more over half of the afterLeave (or afterEnter) events are triggered instantly, second half (those from TransitionChild elements) are properly delayed according to transition class used. I actually have 4 events for 1 TransitionRoot with 2 TransitionChild.

[thecrypticace]

This should be fixed (via #2267), and will be available in the next release.

You can already try it using npm install @headlessui/vue@insiders.
This should be fixed, and will be available in the next release.

@zipper Can you open a separate issue with a reproduction?