Mutate state when working with form steps to prevent latency issues

packages/builder/src/components/design/settings/controls/FormStepConfiguration.svelte

@@ -97,7 +97,8 @@
   }
 
   const addStep = () => {
-    dispatch("change", value.toSpliced($currentStep + 1, 0, {}))
+    value = value.toSpliced($currentStep + 1, 0, {})
+    dispatch("change", value)
     multiStepStore.update(state => ({
       ...state,
       currentStep: $currentStep + 1,
@@ -105,7 +106,8 @@
   }
 
   const removeStep = () => {
-    dispatch("change", value.toSpliced($currentStep, 1))
+    value = value.toSpliced($currentStep, 1)
+    dispatch("change", value)
     multiStepStore.update(state => ({
       ...state,
       currentStep: Math.min($currentStep, stepCount - 2),
@@ -131,7 +133,8 @@
       ...value[$currentStep],
       [field.key]: val,
     }
-    dispatch("change", value.toSpliced($currentStep, 1, newStep))
+    value = value.toSpliced($currentStep, 1, newStep)
+    dispatch("change", value)
   }
 
   const handleStepAction = action => {

packages/client/src/components/app/blocks/MultiStepFormblock.svelte

@@ -5,7 +5,6 @@
   import { builderStore } from "stores"
   import { Utils } from "@budibase/frontend-core"
 
-  export let componentInstance
   export let steps
   export let dataSource
   export let initialFormStep = 1
@@ -33,25 +32,37 @@
 
   $: fetchSchema(dataSource)
   $: enrichedSteps = enrichSteps(steps, schema, $component.id)
-  $: currentStep = getCurrentStep($builderStore, $component)
+  $: currentStep = getCurrentStep(enrichedSteps, $builderStore, $component)
 
-  const getCurrentStep = (builderStore, component) => {
+  const getCurrentStep = (steps, builderStore, component) => {
+    const { componentId, step } = builderStore.metadata || {}
+
+    // If we aren't in the builder or aren't selected then don't return a form
+    // step at all. This will let the form component take over state for which
+    // step is active.
     if (
       !component.selected ||
       !builderStore.inBuilder ||
-      builderStore.metadata?.componentId !== component.id
+      componentId !== component.id
     ) {
       return null
     }
-    return (builderStore.metadata.step || 0) + 1
+
+    // Ensure we have a valid step selected
+    let currentStep = Math.min(step || 0, steps.length - 1)
+
+    // Sanity check
+    currentStep = Math.max(currentStep, 0)
+
+    // Add 1 because the form component expects 1 indexed rather than 0 indexed
+    return currentStep + 1
   }
 
   const getPropsForField = field => {
-    return field._component
-      ? {
-          ...field,
+    if (field._component) {
+      return field
     }
-      : {
+    return {
       field: field.name,
       label: field.name,
       placeholder: field.name,
@@ -102,8 +113,7 @@
   }
 </script>
 
-{#key enrichedSteps}
-  <Block>
+<Block>
   <BlockComponent
     type="form"
     props={{
@@ -166,5 +176,4 @@
       </BlockComponent>
     {/each}
   </BlockComponent>
-  </Block>
-{/key}
+</Block>