fix: modal closing with a custom animation now always works, even if there are animated elements inside the modal (#1159)

Author: VEH9

.changeset/itchy-bobcats-nail.md

@@ -0,0 +1,5 @@
+---
+'@qwik-ui/headless': patch
+---
+
+fix: modal closing with a custom animation now always works, even if there are animated elements inside the modal

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

@@ -19,31 +19,29 @@ export function useModal() {
     const { animationDuration, transitionDuration } = getComputedStyle(modal);
 
     if (animationDuration !== '0s') {
-      modal.addEventListener(
-        'animationend',
-        (e) => {
-          if (e.target === modal) {
-            delete modal.dataset.closing;
-            modal.classList.remove('modal-closing');
-            enableBodyScroll(modal);
-            modal.close();
-          }
-        },
-        { once: true },
-      );
+      const handler = (e: AnimationEvent) => {
+        if (e.target === modal) {
+          delete modal.dataset.closing;
+          modal.classList.remove('modal-closing');
+          enableBodyScroll(modal);
+          modal.close();
+          modal.removeEventListener('animationend', handler);
+        }
+      };
+
+      modal.addEventListener('animationend', handler);
     } else if (transitionDuration !== '0s') {
-      modal.addEventListener(
-        'transitionend',
-        (e) => {
-          if (e.target === modal) {
-            delete modal.dataset.closing;
-            modal.classList.remove('modal-closing');
-            enableBodyScroll(modal);
-            modal.close();
-          }
-        },
-        { once: true },
-      );
+      const handler = (e: TransitionEvent) => {
+        if (e.target === modal) {
+          delete modal.dataset.closing;
+          modal.classList.remove('modal-closing');
+          enableBodyScroll(modal);
+          modal.close();
+          modal.removeEventListener('transitionend', handler);
+        }
+      };
+
+      modal.addEventListener('transitionend', handler);
     } else if (animationDuration === '0s' && transitionDuration === '0s') {
       delete modal.dataset.closing;
       modal.classList.remove('modal-closing');