transitionEnd() doesn't work as expected if event fires on child node but not node itself

[zorac]

I was seeing an issue with react-bootstrap <Modal>s sometimes not being removed after completing their exit transition (and thus remaining on-screen and blocking any further user interaction.) This appears to be due to the transitionend event not firing on the top level DOM node, but other transitionend events firing on child nodes and bubbling up.

dom-hepers' transitionEnd has a check to emulate the transitionend event if on hasn't been seen after a timeout, however a event bubbling up from a child node will also count as the event being "seen" and thus no event is emulated. A quick patch which would change that behaviour:

diff --git a/src/transitionEnd.ts b/src/transitionEnd.ts
index cef860e..d26d7d0 100644
--- a/src/transitionEnd.ts
+++ b/src/transitionEnd.ts
@@ -25,10 +25,9 @@ function emulateTransitionEnd(
   const remove = listen(
     element,
     'transitionend',
-    () => {
-      called = true
-    },
-    { once: true }
+    (event) => {
+      if (event.target === element) called = true
+    }
   )
 
   return () => {

Side-note: a userland workaround for my specific issue is to wrap the <ModalDialog> component and stop the propagation of any transitionend events there.