Fix soft bricking app when closing nested modals using escape key
This commit is contained in:
parent
2e4cfb3312
commit
42b063d21b
1 changed files with 33 additions and 24 deletions
|
@ -54,34 +54,43 @@
|
||||||
|
|
||||||
<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>
|
{/if}
|
||||||
{:else if visible}
|
{: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">
|
||||||
<div
|
{#if visible}
|
||||||
class="spectrum-Underlay is-open"
|
<div
|
||||||
in:fade={{ duration: 200 }}
|
class="spectrum-Underlay is-open"
|
||||||
out:fade|local={{ duration: 200 }}
|
in:fade={{ duration: 200 }}
|
||||||
on:mousedown|self={cancel}
|
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}>
|
<div class="modal-wrapper" on:mousedown|self={cancel}>
|
||||||
<slot name="outside" />
|
<div class="modal-inner-wrapper" on:mousedown|self={cancel}>
|
||||||
<div
|
<slot name="outside" />
|
||||||
use:focusFirstInput
|
<div
|
||||||
class="spectrum-Modal is-open"
|
use:focusFirstInput
|
||||||
in:fly={{ y: 30, duration: 200 }}
|
class="spectrum-Modal is-open"
|
||||||
out:fly|local={{ y: 30, duration: 200 }}
|
in:fly={{ y: 30, duration: 200 }}
|
||||||
>
|
out:fly|local={{ y: 30, duration: 200 }}
|
||||||
<slot />
|
>
|
||||||
|
<slot />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
{/if}
|
||||||
</Portal>
|
</Portal>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue