onTransitionEnd can be triggered by child elements

[rickieshi]

I found out that transitionend event emitted from child element inside modal component can trigger modal to be prematurely close.
If I added a check in on-transition-end.js like so then it works. I'm not sure if the intention was to catch all transitionend event but it looks like a bug to me.

export default function onTransitionEnd(element, callback, transitionProperty = 'all', once = false) {
  const fn = (e) => {
    const { propertyName, type, target } = e;
    // Check to see if target and element are the same element.
    if (target !== element) {
      return ;
    }

    if (transitionProperty !== 'all' && propertyName !== transitionProperty) {
      return;
    }

    if (once) {
      element.removeEventListener(type, fn, true);
    }

    run(null, callback, e);
  };

  element.addEventListener(transitionEndEventName, fn, true);
}

[adrigzr]

Hi! It works as intended for the helper, but non-intended for the modal behaviour. Maybe we can add that as an option to the helper.

This helper needs a deep rework. We found out that when once=false you cannot remove the listener easily.

I'll work on this issue. Thanks for the report!

[adrigzr]

🎉 This issue has been resolved in version 2.4.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀