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,30 +32,42 @@
 
   $: 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,
-        }
-      : {
-          field: field.name,
-          label: field.name,
-          placeholder: field.name,
-          _instanceName: field.name,
-        }
+    if (field._component) {
+      return field
+    }
+    return {
+      field: field.name,
+      label: field.name,
+      placeholder: field.name,
+      _instanceName: field.name,
+    }
   }
 
   const getComponentForField = field => {
@@ -102,69 +113,67 @@
   }
 </script>
 
-{#key enrichedSteps}
-  <Block>
-    <BlockComponent
-      type="form"
-      props={{
-        dataSource,
-        initialFormStep,
-        step: currentStep,
-      }}
-      context="form"
-    >
-      {#each enrichedSteps as step, idx}
+<Block>
+  <BlockComponent
+    type="form"
+    props={{
+      dataSource,
+      initialFormStep,
+      step: currentStep,
+    }}
+    context="form"
+  >
+    {#each enrichedSteps as step, idx}
+      <BlockComponent
+        type="formstep"
+        props={{ step: idx + 1, _instanceName: `Step ${idx + 1}` }}
+        styles={{
+          normal: {
+            width: "600px",
+            "margin-left": "auto",
+            "margin-right": "auto",
+          },
+        }}
+      >
         <BlockComponent
-          type="formstep"
-          props={{ step: idx + 1, _instanceName: `Step ${idx + 1}` }}
-          styles={{
-            normal: {
-              width: "600px",
-              "margin-left": "auto",
-              "margin-right": "auto",
-            },
+          type="container"
+          props={{
+            gap: "M",
+            direction: "column",
+            hAlign: "stretch",
+            vAlign: "top",
+            size: "shrink",
           }}
         >
-          <BlockComponent
-            type="container"
-            props={{
-              gap: "M",
-              direction: "column",
-              hAlign: "stretch",
-              vAlign: "top",
-              size: "shrink",
-            }}
-          >
-            <BlockComponent type="container" order={0}>
-              <BlockComponent type="heading" props={{ text: step.title }} />
-            </BlockComponent>
-            <BlockComponent type="text" props={{ text: step.desc }} order={1} />
-            <BlockComponent type="fieldgroup" order={2}>
-              {#each step.fields as field, fieldIdx}
-                {#if getComponentForField(field)}
-                  <BlockComponent
-                    type={getComponentForField(field)}
-                    props={getPropsForField(field)}
-                    order={fieldIdx}
-                    interactive
-                    name={field.field}
-                  />
-                {/if}
-              {/each}
-            </BlockComponent>
-            <BlockComponent
-              type="buttongroup"
-              props={{ buttons: step.buttons }}
-              styles={{
-                normal: {
-                  "margin-top": "16px",
-                },
-              }}
-              order={3}
-            />
+          <BlockComponent type="container" order={0}>
+            <BlockComponent type="heading" props={{ text: step.title }} />
           </BlockComponent>
+          <BlockComponent type="text" props={{ text: step.desc }} order={1} />
+          <BlockComponent type="fieldgroup" order={2}>
+            {#each step.fields as field, fieldIdx}
+              {#if getComponentForField(field)}
+                <BlockComponent
+                  type={getComponentForField(field)}
+                  props={getPropsForField(field)}
+                  order={fieldIdx}
+                  interactive
+                  name={field.field}
+                />
+              {/if}
+            {/each}
+          </BlockComponent>
+          <BlockComponent
+            type="buttongroup"
+            props={{ buttons: step.buttons }}
+            styles={{
+              normal: {
+                "margin-top": "16px",
+              },
+            }}
+            order={3}
+          />
         </BlockComponent>
-      {/each}
-    </BlockComponent>
-  </Block>
-{/key}
+      </BlockComponent>
+    {/each}
+  </BlockComponent>
+</Block>