diff --git a/src/components/ComposedModal/ComposedModal.svelte b/src/components/ComposedModal/ComposedModal.svelte
index df36630f..2282d40e 100644
--- a/src/components/ComposedModal/ComposedModal.svelte
+++ b/src/components/ComposedModal/ComposedModal.svelte
@@ -17,6 +17,8 @@
   let outerModal = undefined;
   let innerModal = undefined;
 
+  let opened = false;
+
   setContext('ComposedModal', {
     closeModal: () => {
       open = false;
@@ -45,11 +47,15 @@
   });
 
   afterUpdate(() => {
-    if (open) {
+    if (opened) {
+      if (!open) {
+        opened = false;
+        dispatch('close');
+        document.body.classList.add(cx('--body--with-modal-open'));
+      }
+    } else if (open) {
+      opened = true;
       dispatch('open');
-      document.body.classList.add(cx('--body--with-modal-open'));
-    } else {
-      dispatch('close');
       document.body.classList.remove(cx('--body--with-modal-open'));
     }
   });
diff --git a/src/components/Modal/Modal.svelte b/src/components/Modal/Modal.svelte
index 03e7304e..5f689b10 100644
--- a/src/components/Modal/Modal.svelte
+++ b/src/components/Modal/Modal.svelte
@@ -30,6 +30,8 @@
   let outerModal = undefined;
   let innerModal = undefined;
 
+  let opened = false
+
   // TODO: reuse in ComposedModal
   function focus(element) {
     const node = (element || innerModal).querySelector(selectorPrimaryFocus) || buttonRef;
@@ -37,13 +39,17 @@
   }
 
   afterUpdate(() => {
-    if (open) {
+    if (opened) {
+      if (!open) {
+        opened = false;
+        dispatch('close');
+        document.body.classList.remove(cx('--body--with-modal-open'));
+      }
+    } else if (open) {
+      opened = true;
       focus();
       dispatch('open');
       document.body.classList.add(cx('--body--with-modal-open'));
-    } else {
-      dispatch('close');
-      document.body.classList.remove(cx('--body--with-modal-open'));
     }
   });