From 22f93ee675c04e96a3119fdd76eaa273614891cd Mon Sep 17 00:00:00 2001
From: metonym <ericyl.us@gmail.com>
Date: Thu, 2 Jun 2022 17:56:07 -0700
Subject: [PATCH] fix(modal): nested modals should correctly toggle the body
 class (#1331)

Fixes #1324
---
 src/ComposedModal/ComposedModal.svelte | 15 ++++++++++++++-
 src/Modal/Modal.svelte                 | 13 ++++++++++++-
 src/Modal/modalStore.js                |  8 ++++++++
 3 files changed, 34 insertions(+), 2 deletions(-)
 create mode 100644 src/Modal/modalStore.js

diff --git a/src/ComposedModal/ComposedModal.svelte b/src/ComposedModal/ComposedModal.svelte
index 36aecf5d..023cd26e 100644
--- a/src/ComposedModal/ComposedModal.svelte
+++ b/src/ComposedModal/ComposedModal.svelte
@@ -38,6 +38,7 @@
     afterUpdate,
   } from "svelte";
   import { writable } from "svelte/store";
+  import { modalsOpen, addModalId, removeModalId } from "../Modal/modalStore";
 
   const dispatch = createEventDispatcher();
   const label = writable(undefined);
@@ -45,6 +46,7 @@
   let buttonRef = null;
   let innerModal = null;
   let didClickInnerModal = false;
+  let id = "ccs-" + Math.random().toString(36);
 
   setContext("ComposedModal", {
     closeModal: () => {
@@ -78,6 +80,7 @@
     });
 
     return () => {
+      removeModalId(id);
       document.body.classList.remove("bx--body--with-modal-open");
     };
   });
@@ -87,14 +90,24 @@
       if (!open) {
         opened = false;
         dispatch("close");
-        document.body.classList.remove("bx--body--with-modal-open");
       }
     } else if (open) {
       opened = true;
       dispatch("open");
+    }
+
+    if ($modalsOpen.length > 0) {
       document.body.classList.add("bx--body--with-modal-open");
+    } else {
+      document.body.classList.remove("bx--body--with-modal-open");
     }
   });
+
+  $: if (open) {
+    addModalId(id);
+  } else {
+    removeModalId(id);
+  }
 </script>
 
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
diff --git a/src/Modal/Modal.svelte b/src/Modal/Modal.svelte
index 9efbda6f..67047417 100644
--- a/src/Modal/Modal.svelte
+++ b/src/Modal/Modal.svelte
@@ -92,6 +92,7 @@
   import { createEventDispatcher, onMount, afterUpdate } from "svelte";
   import Close from "../icons/Close.svelte";
   import Button from "../Button/Button.svelte";
+  import { modalsOpen, addModalId, removeModalId } from "./modalStore";
 
   const dispatch = createEventDispatcher();
 
@@ -108,6 +109,7 @@
 
   onMount(() => {
     return () => {
+      removeModalId(id);
       document.body.classList.remove("bx--body--with-modal-open");
     };
   });
@@ -117,13 +119,17 @@
       if (!open) {
         opened = false;
         dispatch("close");
-        document.body.classList.remove("bx--body--with-modal-open");
       }
     } else if (open) {
       opened = true;
       focus();
       dispatch("open");
+    }
+
+    if ($modalsOpen.length > 0) {
       document.body.classList.add("bx--body--with-modal-open");
+    } else {
+      document.body.classList.remove("bx--body--with-modal-open");
     }
   });
 
@@ -143,6 +149,11 @@
       alertDialogProps["aria-describedby"] = modalBodyId;
     }
   }
+  $: if (open) {
+    addModalId(id);
+  } else {
+    removeModalId(id);
+  }
 </script>
 
 <!-- svelte-ignore a11y-mouse-events-have-key-events -->
diff --git a/src/Modal/modalStore.js b/src/Modal/modalStore.js
new file mode 100644
index 00000000..2428919f
--- /dev/null
+++ b/src/Modal/modalStore.js
@@ -0,0 +1,8 @@
+import { writable } from "svelte/store";
+
+export const modalsOpen = writable([]);
+
+export const addModalId = (id) => modalsOpen.update((ids) => [...ids, id]);
+
+export const removeModalId = (id) =>
+  modalsOpen.update((ids) => ids.filter((_id) => _id !== id));