fix(modal): nested modals should correctly toggle the body class (#1331)

Fixes #1324

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 -->

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 -->

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));