MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
packages/bbui/src/Modal/Modal.svelte
View File

@ -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}