Merge pull request #752 from maiieul/fix-headless-modal--event-bubbling

fix(headless modal): prevent bubbling of animationend and transitionend event listeners

Author: maiieul

packages/kit-headless/src/components/modal/use-modal.tsx

@@ -21,23 +21,27 @@ export function useModal() {
     if (animationDuration !== '0s') {
       modal.addEventListener(
         'animationend',
-        () => {
-          delete modal.dataset.closing;
-          modal.classList.remove('modal-closing');
-          enableBodyScroll(modal);
-          modal.close();
+        (e) => {
+          if (e.target === modal) {
+            delete modal.dataset.closing;
+            modal.classList.remove('modal-closing');
+            enableBodyScroll(modal);
+            modal.close();
+          }
         },
         { once: true },
       );
     }
     if (transitionDuration !== '0s') {
       modal.addEventListener(
         'transitionend',
-        () => {
-          delete modal.dataset.closing;
-          modal.classList.remove('modal-closing');
-          enableBodyScroll(modal);
-          modal.close();
+        (e) => {
+          if (e.target === modal) {
+            delete modal.dataset.closing;
+            modal.classList.remove('modal-closing');
+            enableBodyScroll(modal);
+            modal.close();
+          }
         },
         { once: true },
       );