Fix workflow editing state binding, fix transitions and fix select placeholder options

packages/builder/src/components/workflow/SetupPanel/ParamInputs/ModelSelector.svelte

@@ -8,7 +8,7 @@
 
 <div class="block-field">
   <select class="budibase__input" bind:value={modelId}>
-    <option value="" />
+    <option value="">Choose an option</option>
     {#each $backendUiStore.models as model}
       <option value={model._id}>{model.name}</option>
     {/each}

packages/builder/src/components/workflow/SetupPanel/ParamInputs/RecordSelector.svelte

@@ -3,6 +3,8 @@
   import { Input, Label } from "@budibase/bbui"
 
   export let value
+  let modelId = value && value.model ? value.model._id : ""
+  $: value.model = $backendUiStore.models.find(x => x._id === modelId)
 
   function setParsedValue(evt, field) {
     const fieldSchema = value.model.schema[field]
@@ -10,15 +12,15 @@
       value[field] = parseInt(evt.target.value)
       return
     }
-
     value[field] = evt.target.value
   }
 </script>
 
 <div class="block-field">
-  <select class="budibase__input" bind:value={value.model}>
+  <select class="budibase__input" bind:value={modelId}>
+    <option value="">Choose an option</option>
     {#each $backendUiStore.models as model}
-      <option value={model}>{model.name}</option>
+      <option value={model._id}>{model.name}</option>
     {/each}
   </select>
 </div>

packages/builder/src/components/workflow/SetupPanel/WorkflowBlockSetup.svelte

@@ -15,6 +15,7 @@
       <label class="label">{parameter}</label>
       {#if Array.isArray(type)}
         <Select bind:value={block.args[parameter]} thin secondary>
+          <option value="">Choose an option</option>
           {#each type as option}
             <option value={option}>{option}</option>
           {/each}
@@ -35,7 +36,7 @@
       {:else if type === 'model'}
         <ModelSelector bind:value={block.args[parameter]} />
       {:else if type === 'record'}
-        <RecordSelector value={block.args[parameter]} />
+        <RecordSelector bind:value={block.args[parameter]} />
       {:else if type === 'string'}
         <Input type="text" thin bind:value={block.args[parameter]} />
       {/if}

packages/builder/src/components/workflow/WorkflowBuilder/WorkflowBuilder.svelte

@@ -4,8 +4,6 @@
   import { notifier } from "builderStore/store/notifications"
   import Flowchart from "./flowchart/FlowChart.svelte"
 
-  let section
-
   $: workflow =
     $workflowStore.selectedWorkflow && $workflowStore.selectedWorkflow.workflow
   $: workflowLive = workflow && workflow.live
@@ -27,13 +25,9 @@
       notifier.danger(`Workflow ${workflow.name} disabled.`)
     }
   }
-
-  afterUpdate(() => {
-    section.scrollTo(0, section.scrollHeight)
-  })
 </script>
 
-<section bind:this={section}>
+<section>
   <Flowchart {workflow} {onSelect} />
 </section>
 <footer>

packages/builder/src/components/workflow/WorkflowBuilder/flowchart/Arrow.svelte

@@ -1,9 +1,4 @@
-<script>
-  import { fade } from "svelte/transition"
-</script>
-
 <svg
-  transition:fade
   width="9"
   height="75"
   viewBox="0 0 9 75"

packages/builder/src/components/workflow/WorkflowBuilder/flowchart/FlowChart.svelte

@@ -24,8 +24,8 @@
     <div
       class="block"
       animate:flip={{ duration: 600 }}
-      in:fade
+      in:fade|local
-      out:fly={{ x: 100 }}>
+      out:fly|local={{ x: 100 }}>
       <FlowItem {onSelect} {block} />
       {#if idx !== blocks.length - 1}
         <Arrow />