Fix incorrect transitionend/transitioncancel events for the Transition component (#1537)

* fix incorrect transitionend/transitioncancel events

Due to bubbling, the `Transition` component also "finished" when you had
children that uses `transition-colors` for example.

This commit ensures that we only care about transition events related to
the actual DOM node that we defined the transitions on...

* update changelog

Author: RobinMalfait

packages/@headlessui-react/CHANGELOG.md

@@ -12,6 +12,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Add `by` prop for `Listbox`, `Combobox` and `RadioGroup` ([#1482](https://github.com/tailwindlabs/headlessui/pull/1482))
 - Add `@headlessui/tailwindcss` plugin ([#1487](https://github.com/tailwindlabs/headlessui/pull/1487))
 
+### Fixed
+
+- Fix incorrect transitionend/transitioncancel events for the Transition component ([#1537](https://github.com/tailwindlabs/headlessui/pull/1537))
+
 ## [1.6.4] - 2022-05-29
 
 ### Fixed

packages/@headlessui-react/src/components/transitions/utils/transition.ts

@@ -52,37 +52,28 @@ function waitForTransition(node: HTMLElement, done: (reason: Reason) => void) {
       )
     } else {
       listeners.push(
-        d.addEventListener(
-          node,
-          'transitionrun',
-          () => {
-            // Cleanup "old" listeners
-            listeners.splice(0).forEach((dispose) => dispose())
-
-            // Register new listeners
-            listeners.push(
-              d.addEventListener(
-                node,
-                'transitionend',
-                () => {
-                  done(Reason.Ended)
-                  listeners.splice(0).forEach((dispose) => dispose())
-                },
-                { once: true }
-              ),
-              d.addEventListener(
-                node,
-                'transitioncancel',
-                () => {
-                  done(Reason.Cancelled)
-                  listeners.splice(0).forEach((dispose) => dispose())
-                },
-                { once: true }
-              )
-            )
-          },
-          { once: true }
-        )
+        d.addEventListener(node, 'transitionrun', (event) => {
+          if (event.target !== event.currentTarget) return
+
+          // Cleanup "old" listeners
+          listeners.splice(0).forEach((dispose) => dispose())
+
+          // Register new listeners
+          listeners.push(
+            d.addEventListener(node, 'transitionend', (event) => {
+              if (event.target !== event.currentTarget) return
+
+              done(Reason.Ended)
+              listeners.splice(0).forEach((dispose) => dispose())
+            }),
+            d.addEventListener(node, 'transitioncancel', (event) => {
+              if (event.target !== event.currentTarget) return
+
+              done(Reason.Cancelled)
+              listeners.splice(0).forEach((dispose) => dispose())
+            })
+          )
+        })
       )
     }
   } else {