bugfix: modal getting stuck on open (but hidden)

Recreate: Add Datatable component (from) index... try adding new screen... screen dialog does not show

packages/builder/src/common/ConfirmDialog.svelte

@@ -12,14 +12,16 @@
   export let onCancel = () => {}
 
   export const show = () => {
-    UIkit.modal(theModal).show()
+    uiKitModal.hide()
+    uiKitModal.show()
   }
 
   export const hide = () => {
-    UIkit.modal(theModal).hide()
+    uiKitModal.hide()
   }
 
   let theModal
+  $: uiKitModal = theModal && UIkit.modal(theModal)
 
   const cancel = () => {
     hide()
@@ -32,7 +34,7 @@
   }
 </script>
 
-<div id="my-id" uk-modal bind:this={theModal}>
+<div id={title} uk-modal bind:this={theModal}>
   <div class="uk-modal-dialog">
     <button class="uk-modal-close-default" type="button" uk-close />
     <div class="uk-modal-header">

packages/builder/src/userInterface/NewScreen.svelte

@@ -5,6 +5,7 @@
   import Button from "../common/Button.svelte"
   import ActionButton from "../common/ActionButton.svelte"
   import ButtonGroup from "../common/ButtonGroup.svelte"
+  import ConfirmDialog from "../common/ConfirmDialog.svelte"
   import { pipe } from "../common/core"
   import UIkit from "uikit"
   import { isRootComponent } from "./pagesParsing/searchComponents"
@@ -14,10 +15,10 @@
   import { assign } from "lodash"
 
   export const show = () => {
-    UIkit.modal(componentSelectorModal).show()
+    dialog.show()
   }
 
-  let componentSelectorModal
+  let dialog
   let layoutComponents
   let layoutComponent
   let screens
@@ -50,11 +51,11 @@
     if (!isValid) return
 
     store.createScreen(name, route, layoutComponent.name)
-    UIkit.modal(componentSelectorModal).hide()
+    dialog.hide()
   }
 
   const cancel = () => {
-    UIkit.modal(componentSelectorModal).hide()
+    dialog.hide()
   }
 
   const screenNameExists = name => {
@@ -77,61 +78,51 @@
   }
 </script>
 
-<div bind:this={componentSelectorModal} id="new-component-modal" uk-modal>
-  <div class="uk-modal-dialog" uk-overflow-auto>
-
-    <div class="uk-modal-header">
-      <h1>New Screen</h1>
-    </div>
-
-    <div class="uk-modal-body uk-form-horizontal">
-      <div class="uk-margin">
-        <label class="uk-form-label">Name</label>
-        <div class="uk-form-controls">
-          <input
-            class="uk-input uk-form-small"
-            class:uk-form-danger={saveAttempted && (name.length === 0 || screenNameExists(name))}
-            bind:value={name} />
-        </div>
+<ConfirmDialog
+  bind:this={dialog}
+  title="New Screen"
+  onCancel={cancel}
+  onOk={save}
+  okText="Create Screen">
+
+  <div class="uk-form-horizontal">
+    <div class="uk-margin">
+      <label class="uk-form-label">Name</label>
+      <div class="uk-form-controls">
+        <input
+          class="uk-input uk-form-small"
+          class:uk-form-danger={saveAttempted && (name.length === 0 || screenNameExists(name))}
+          bind:value={name} />
       </div>
+    </div>
 
-      <div class="uk-margin">
-        <label class="uk-form-label">Route (Url)</label>
-        <div class="uk-form-controls">
-          <input
-            class="uk-input uk-form-small"
-            class:uk-form-danger={saveAttempted && (route.length === 0 || routeNameExists(route))}
-            bind:value={route}
-            on:change={routeChanged} />
-        </div>
+    <div class="uk-margin">
+      <label class="uk-form-label">Route (Url)</label>
+      <div class="uk-form-controls">
+        <input
+          class="uk-input uk-form-small"
+          class:uk-form-danger={saveAttempted && (route.length === 0 || routeNameExists(route))}
+          bind:value={route}
+          on:change={routeChanged} />
       </div>
+    </div>
 
-      <div class="uk-margin">
-        <label class="uk-form-label">Layout Component</label>
-        <div class="uk-form-controls">
-          <select
-            class="uk-select uk-form-small"
-            bind:value={layoutComponent}
-            class:uk-form-danger={saveAttempted && !layoutComponent}>
-            {#each layoutComponents as comp}
-              <option value={comp}>
-                {comp.componentName} - {comp.libName}
-              </option>
-            {/each}
-          </select>
-        </div>
+    <div class="uk-margin">
+      <label class="uk-form-label">Layout Component</label>
+      <div class="uk-form-controls">
+        <select
+          class="uk-select uk-form-small"
+          bind:value={layoutComponent}
+          class:uk-form-danger={saveAttempted && !layoutComponent}>
+          {#each layoutComponents as comp}
+            <option value={comp}>
+              {comp.componentName} - {comp.libName}
+            </option>
+          {/each}
+        </select>
       </div>
-
-      <ButtonGroup style="float: right;">
-        <ActionButton primary on:click={save}>Create Screen</ActionButton>
-        <ActionButton alert on:click={cancel}>Cancel</ActionButton>
-      </ButtonGroup>
     </div>
   </div>
-</div>
 
-<style>
-  h1 {
-    font-size: 1.2em;
-  }
-</style>
+</ConfirmDialog>
+