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

packages/builder/src/common/Modal.svelte

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

packages/builder/src/database/RecordView.svelte

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