Merge pull request #4734 from Budibase/fix/esc-nested-modals

Fix soft bricking app when closing nested modals using escape key

packages/bbui/src/Modal/Modal.svelte

@@ -54,14 +54,22 @@
 
 <svelte:window on:keydown={handleKey} />
 
-<!-- These svelte if statements need to be defined like this. -->
+{#if inline}
-<!-- The modal transitions do not work if nested inside more than one "if" -->
+  {#if visible}
-{#if visible && inline}
     <div use:focusFirstInput class="spectrum-Modal inline is-open">
       <slot />
     </div>
-{:else if visible}
+  {/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">
+    {#if visible}
       <div
         class="spectrum-Underlay is-open"
         in:fade={{ duration: 200 }}
@@ -82,6 +90,7 @@
           </div>
         </div>
       </div>
+    {/if}
   </Portal>
 {/if}