From c4ebc85f3cf80bf77a9e9eb87236b9c650d4f991 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <andrew@kingston.dev>
Date: Mon, 28 Feb 2022 15:00:45 +0000
Subject: [PATCH] Fix soft bricking app when closing nested modals using escape
 key

---
 packages/bbui/src/Modal/Modal.svelte | 57 ++++++++++++++++------------
 1 file changed, 33 insertions(+), 24 deletions(-)

diff --git a/packages/bbui/src/Modal/Modal.svelte b/packages/bbui/src/Modal/Modal.svelte
index f805dec0ad..706ee56bb2 100644
--- a/packages/bbui/src/Modal/Modal.svelte
+++ b/packages/bbui/src/Modal/Modal.svelte
@@ -54,34 +54,43 @@
 
 <svelte:window on:keydown={handleKey} />
 
-<!-- These svelte if statements need to be defined like this. -->
-<!-- The modal transitions do not work if nested inside more than one "if" -->
-{#if visible && inline}
-  <div use:focusFirstInput class="spectrum-Modal inline is-open">
-    <slot />
-  </div>
-{:else if visible}
+{#if inline}
+  {#if visible}
+    <div use:focusFirstInput class="spectrum-Modal inline is-open">
+      <slot />
+    </div>
+  {/if}
+{:else}
+  <!--
+    We cannot conditionally render the portal as this leads to a missing
+    insertion point when using nested modals. Therefore we just conditionally
+    render the content of the portal.
+    It still breaks the modal animation, but its better than soft bricking the
+    screen.
+  -->
   <Portal target=".modal-container">
-    <div
-      class="spectrum-Underlay is-open"
-      in:fade={{ duration: 200 }}
-      out:fade|local={{ duration: 200 }}
-      on:mousedown|self={cancel}
-    >
-      <div class="modal-wrapper" on:mousedown|self={cancel}>
-        <div class="modal-inner-wrapper" on:mousedown|self={cancel}>
-          <slot name="outside" />
-          <div
-            use:focusFirstInput
-            class="spectrum-Modal is-open"
-            in:fly={{ y: 30, duration: 200 }}
-            out:fly|local={{ y: 30, duration: 200 }}
-          >
-            <slot />
+    {#if visible}
+      <div
+        class="spectrum-Underlay is-open"
+        in:fade={{ duration: 200 }}
+        out:fade|local={{ duration: 200 }}
+        on:mousedown|self={cancel}
+      >
+        <div class="modal-wrapper" on:mousedown|self={cancel}>
+          <div class="modal-inner-wrapper" on:mousedown|self={cancel}>
+            <slot name="outside" />
+            <div
+              use:focusFirstInput
+              class="spectrum-Modal is-open"
+              in:fly={{ y: 30, duration: 200 }}
+              out:fly|local={{ y: 30, duration: 200 }}
+            >
+              <slot />
+            </div>
           </div>
         </div>
       </div>
-    </div>
+    {/if}
   </Portal>
 {/if}