Open
Description
Describe the bug
When loading a multi step form where the 1st FormizStep is disabled, no step is rendered.
Codesandbox
To Reproduce
- In a multi step form, set isEnabled to false for the first FormizStep.
- Load the page
Expected behavior
This step should not be rendered, but the following one in order should
Screenshots
Additional context
The issue comes from the registerStep
action in the store:
registerStep: (stepName, { label, order = 0, isEnabled = true } = {}) =>
set((state) => {
return {
steps: [
...state.steps,
{
name: stepName,
label,
isSubmitted: false,
isVisited: false,
order,
isEnabled,
},
].sort((stepA, stepB) => stepA.order - stepB.order),
form: {
...state.form,
currentStepName: state.form.currentStepName ?? stepName, // <- HERE
},
};
}),
If the step is not enabled, it will still register it as the form.currentStepName
and mess with rendering of the steps.
I think it could also be nice to have some safety check if 'initialStepName' is a disabled step.
On a similar note, I think that the computation for the value isFirstStep
and isLastStep
should be on enabled steps and not all steps:
// formInterfaceSelector
...isFormStateSubscribed(
"isFirstStep",
state.steps[0]?.name === currentStep?.name,
stateSubscription
),
...isFormStateSubscribed(
"isLastStep",
state.steps[state.steps.length - 1]?.name === currentStep?.name,
stateSubscription
),
};