Fix soft bricking app when closing nested modals using escape key
This commit is contained in:
parent
2cf00112ad
commit
c4ebc85f3c
|
@ -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}
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue