Fix for field modal infinite render loop once closed from click away

This commit is contained in:
cmack 2019-12-04 21:49:16 +00:00
parent 5a2ffac934
commit 339992f656
2 changed files with 42 additions and 41 deletions

View File

@ -1,41 +1,41 @@
<script>
import UIkit from "uikit";
export let isOpen = false;
export let onClosed = () => {};
export let id = "";
let ukModal;
let listenerAdded = false;
$: {
if(ukModal && !listenerAdded) {
listenerAdded = true;
ukModal.addEventListener("hide", onClosed);
}
if(ukModal) {
if(isOpen) {
UIkit.modal(ukModal).show();
} else {
UIkit.modal(ukModal).hide();
}
}
}
</script>
<div bind:this={ukModal} uk-modal {id}>
<div class="uk-modal-dialog uk-modal-body" uk-overflow-auto>
<slot />
</div>
</div>
<style>
.uk-modal-dialog {
border-radius: .3rem;
}
<script>
import UIkit from "uikit";
export let isOpen = false;
export let onClosed = () => {};
export let id = "";
let ukModal;
let listenerAdded = false;
$: {
if(ukModal && !listenerAdded) {
listenerAdded = true;
ukModal.addEventListener("hidden", onClosed);
}
if(ukModal) {
if(isOpen) {
UIkit.modal(ukModal).show();
} else {
UIkit.modal(ukModal).hide();
}
}
}
</script>
<div bind:this={ukModal} uk-modal {id}>
<div class="uk-modal-dialog uk-modal-body" uk-overflow-auto>
<slot />
</div>
</div>
<style>
.uk-modal-dialog {
border-radius: .3rem;
}
</style>

View File

@ -39,6 +39,7 @@ store.subscribe($store => {
editingField = true;
}
onFinishedFieldEdit = (field) => {
if(field) {
store.saveField(field);
@ -139,7 +140,7 @@ const nameChanged = ev => {
{/if}
{#if editingField}
<Modal bind:isOpen={editingField}>
<Modal bind:isOpen={editingField} onClosed={() => onFinishedFieldEdit(false) }>
<FieldView field={fieldToEdit}
onFinished={onFinishedFieldEdit}
allFields={record.fields}