Fixes for rendering issues for Multistep in client and builder

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

@@ -1,5 +1,6 @@
 <script>
   import BlockComponent from "components/BlockComponent.svelte"
+  import { Helpers } from "@budibase/bbui"
   import { getContext, setContext } from "svelte"
   import { builderStore } from "stores"
   import { Utils } from "@budibase/frontend-core"
@@ -39,7 +40,7 @@
   let schema
 
   $: fetchSchema(dataSource)
-  $: enrichedSteps = enrichSteps(steps, schema, $component.id)
+  $: enrichedSteps = enrichSteps(steps, schema, $component.id, $currentStep)
   $: updateCurrentStep(enrichedSteps, $builderStore, $component)
 
   const updateCurrentStep = (steps, builderStore, component) => {
@@ -113,6 +114,7 @@
         dataSource,
       })
       return {
+        _stepId: Helpers.uuid(),
         fields: getDefaultFields(fields || [], schema),
         title: title ?? defaultProps.title,
         desc,
@@ -122,77 +124,76 @@
   }
 </script>
 
-{#key $currentStep}
+<FormBlockWrapper {actionType} {dataSource} {rowId} {noRowsMessage}>
-  <FormBlockWrapper {actionType} {dataSource} {rowId} {noRowsMessage}>
+  <BlockComponent
-    <BlockComponent
+    type="form"
-      type="form"
+    context="form"
-      context="form"
+    props={{
-      props={{
+      dataSource,
-        dataSource,
+      actionType: actionType === "Create" ? "Create" : "Update",
-        actionType: actionType === "Create" ? "Create" : "Update",
+      readonly: actionType === "View",
-        readonly: actionType === "View",
+    }}
-      }}
+    styles={{
-      styles={{
+      normal: {
-        normal: {
+        width: "600px",
-          width: "600px",
+        "margin-left": "auto",
-          "margin-left": "auto",
+        "margin-right": "auto",
-          "margin-right": "auto",
+      },
-        },
+    }}
-      }}
+  >
-    >
+    {#each enrichedSteps as step, stepIdx (step._stepId)}
-      {#each enrichedSteps as step, stepIdx}
+      <BlockComponent
+        type="formstep"
+        props={{ step: stepIdx + 1, _instanceName: `Step ${stepIdx + 1}` }}
+      >
         <BlockComponent
-          type="formstep"
+          type="container"
-          props={{ step: stepIdx + 1, _instanceName: `Step ${stepIdx + 1}` }}
+          props={{
+            gap: "M",
+            direction: "column",
+            hAlign: "stretch",
+            vAlign: "top",
+            size: "shrink",
+          }}
         >
-          <BlockComponent
+          <BlockComponent type="container" order={0}>
-            type="container"
+            <BlockComponent type="heading" props={{ text: step.title }} />
-            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="container" order={2}>
-              <div
-                class="form-block fields"
-                class:mobile={$context.device.mobile}
-              >
-                {#each step.fields as field, fieldIdx (`${field.field || field.name}_${stepIdx}_${fieldIdx}`)}
-                  {#if getComponentForField(field)}
-                    <BlockComponent
-                      type={getComponentForField(field)}
-                      props={getPropsForField(field)}
-                      order={fieldIdx}
-                      interactive
-                      name={field.field}
-                    />
-                  {/if}
-                {/each}
-              </div>
-            </BlockComponent>
-            <BlockComponent
-              type="buttongroup"
-              props={{ buttons: step.buttons }}
-              styles={{
-                normal: {
-                  "margin-top": "16px",
-                },
-              }}
-              order={3}
-            />
           </BlockComponent>
+          <BlockComponent type="text" props={{ text: step.desc }} order={1} />
+
+          <BlockComponent type="container" order={2}>
+            <div
+              class="form-block fields"
+              class:mobile={$context.device.mobile}
+            >
+              {#each step.fields as field, fieldIdx (`${field.field || field.name}_${fieldIdx}`)}
+                {#if getComponentForField(field)}
+                  <BlockComponent
+                    type={getComponentForField(field)}
+                    props={getPropsForField(field)}
+                    order={fieldIdx}
+                    interactive
+                    name={field.field}
+                  />
+                {/if}
+              {/each}
+            </div>
+          </BlockComponent>
+          <BlockComponent
+            type="buttongroup"
+            props={{ buttons: step.buttons }}
+            styles={{
+              normal: {
+                "margin-top": "16px",
+              },
+            }}
+            order={3}
+          />
         </BlockComponent>
-      {/each}
+      </BlockComponent>
-    </BlockComponent>
+    {/each}
-  </FormBlockWrapper>
+  </BlockComponent>
-{/key}
+</FormBlockWrapper>
 
 <style>
   .fields {