Fix soft bricking app when closing nested modals using escape key

This commit is contained in:
Andrew Kingston 2022-02-28 15:00:45 +00:00
parent 2cf00112ad
commit c4ebc85f3c
1 changed files with 33 additions and 24 deletions

View File

@ -54,14 +54,22 @@
<svelte:window on:keydown={handleKey} /> <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"> <div use:focusFirstInput class="spectrum-Modal inline is-open">
<slot /> <slot />
</div> </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"> <Portal target=".modal-container">
{#if visible}
<div <div
class="spectrum-Underlay is-open" class="spectrum-Underlay is-open"
in:fade={{ duration: 200 }} in:fade={{ duration: 200 }}
@ -82,6 +90,7 @@
</div> </div>
</div> </div>
</div> </div>
{/if}
</Portal> </Portal>
{/if} {/if}