Skip to content

Step Form - First Step with isEnabled=false #232

Open
@ntatoud

Description

@ntatoud

Describe the bug

When loading a multi step form where the 1st FormizStep is disabled, no step is rendered.

Codesandbox

See codesandbox

To Reproduce

  1. In a multi step form, set isEnabled to false for the first FormizStep.
  2. Load the page

Expected behavior

This step should not be rendered, but the following one in order should

Screenshots

Image

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
    ),
  };

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions