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,14 +78,14 @@
   }
 </script>
 
-<div bind:this={componentSelectorModal} id="new-component-modal" uk-modal>
-  <div class="uk-modal-dialog" uk-overflow-auto>
+<ConfirmDialog
+  bind:this={dialog}
+  title="New Screen"
+  onCancel={cancel}
+  onOk={save}
+  okText="Create Screen">
 
-    <div class="uk-modal-header">
-      <h1>New Screen</h1>
-    </div>
-
-    <div class="uk-modal-body uk-form-horizontal">
+  <div class="uk-form-horizontal">
     <div class="uk-margin">
       <label class="uk-form-label">Name</label>
       <div class="uk-form-controls">
@@ -121,17 +122,7 @@
         </select>
       </div>
     </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>
+