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,8 +124,7 @@
   }
 </script>
 
-{#key $currentStep}
-  <FormBlockWrapper {actionType} {dataSource} {rowId} {noRowsMessage}>
+<FormBlockWrapper {actionType} {dataSource} {rowId} {noRowsMessage}>
   <BlockComponent
     type="form"
     context="form"
@@ -140,7 +141,7 @@
       },
     }}
   >
-      {#each enrichedSteps as step, stepIdx}
+    {#each enrichedSteps as step, stepIdx (step._stepId)}
       <BlockComponent
         type="formstep"
         props={{ step: stepIdx + 1, _instanceName: `Step ${stepIdx + 1}` }}
@@ -159,12 +160,13 @@
             <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}`)}
+              {#each step.fields as field, fieldIdx (`${field.field || field.name}_${fieldIdx}`)}
                 {#if getComponentForField(field)}
                   <BlockComponent
                     type={getComponentForField(field)}
@@ -191,8 +193,7 @@
       </BlockComponent>
     {/each}
   </BlockComponent>
-  </FormBlockWrapper>
-{/key}
+</FormBlockWrapper>
 
 <style>
   .fields {