fix: Validation with validateEditContexts for GoToStepAsync in FluentWizard

[bejulian]

🐛 Bug Report

When custom buttons are used for navigation in FluentWizard, GoToStepAsync(int step, bool validateEditContexts = false) should be used according to the documentation. If this code is used with validateEditContexts = true validation is not executed for the current step, but for the next step to be navigated to. As a result, it is no longer possible to navigate to a step with validation, but a step with validation is not validated.

💻 Repro or Code Sample

If current step index is 0 and step 1 has validation, navigating there can be done with
Wizard.GoToStepAsync(1, true).
Within this method, Value is set to 1, then validation is executed:

public Task GoToStepAsync(int step, bool validateEditContexts = false)
{
    Value = step;
    return ValidateAndGoToStepAsync(step, validateEditContexts);
}

As a result, the current step is never validated:

internal async Task ValidateAndGoToStepAsync(int targetIndex, bool validateEditContexts)
{
    var stepChangeArgs = await OnStepChangeHandlerAsync(targetIndex, validateEditContexts);
    var isCanceled = stepChangeArgs?.IsCancelled ?? false;

    if (!isCanceled)
    {
        Value = targetIndex;
        await ValueChanged.InvokeAsync(targetIndex);
        StateHasChanged();
    }
}

protected virtual async Task<FluentWizardStepChangeEventArgs> OnStepChangeHandlerAsync(int targetIndex, bool validateEditContexts)
{
    var stepChangeArgs = new FluentWizardStepChangeEventArgs(targetIndex, _steps[targetIndex].Label);

    if (validateEditContexts)
    {
        var allEditContextsAreValid = _steps[Value].ValidateEditContexts(); // Value was already set to targetIndex in GoToStepAsync
        stepChangeArgs.IsCancelled = !allEditContextsAreValid;

        if (!allEditContextsAreValid)
        {
            await _steps[Value].InvokeOnInValidSubmitForEditFormsAsync();
        }
        if (!stepChangeArgs.IsCancelled && allEditContextsAreValid)
        {
            // Invoke the 'OnValidSubmit' handlers for the Edit Forms
            await _steps[Value].InvokeOnValidSubmitForEditFormsAsync();
        }

        await _steps[Value].InvokeOnSubmitForEditFormsAsync();
    }

    return await OnStepChangeHandlerAsync(stepChangeArgs);
}

🤔 Expected Behavior

GoToStepAsync should validate the current step.

😯 Current Behavior

The next step is validated. Since this validation will fail in most cases, wizard is stuck with no option to navigate to next step. On the other hand, if the current step required validation, it will not execute validation.

💁 Possible Solution

In my opinion, the first line in the following method can be removed:

public Task GoToStepAsync(int step, bool validateEditContexts = false)
{
    Value = step;
    return ValidateAndGoToStepAsync(step, validateEditContexts);
}

The new value for step will be set within ValidateAndGoToStepAsync if validation is successful.
I would be happy to open a PR with the described change if that is appreciated.

🔦 Context

I tried to create a wizard with custom ButtonTemplate where two steps require validation with FluentEditForm. While testing the behavior, this bug was discovered.

🌍 Your Environment

• OS & Device: Windows 10 on Laptop
• Browser: Google Chrome
• .NET and Fluent UI Blazor library Version: 8.0.300 and 4.10.4

[dvoituron]

Can you give us a code example to confirm the problem and correct it effectively?

[bejulian]

@dvoituron Here is some code that reproduces the issue.
In this example, navigating from the first to the second step is not possible because the FluentEditForm of the second step is evaluated. If clicking on the second step in the stepper (after "Next" was clicked), the validation error is displayed:

@page "/fluentwizard-gotonextstep-notpossible"

<FluentWizard StepperPosition="@StepperPosition.Top"
              StepSequence="@WizardStepSequence.Visited"
              DisplayStepNumber="@(WizardStepStatus.Current | WizardStepStatus.Next)"
              Border="WizardBorder.Outside"
              @bind-Value="@this._currentPage"
              @ref="@_wizard">
    <Steps>
        <FluentWizardStep Label="Start">
            <h1>Start</h1>
        </FluentWizardStep>
        <FluentWizardStep Label="Step with validation">
            <h1>Step with validation</h1>
            <FluentEditForm Model="_formData" FormName="validationForm">
                <DataAnnotationsValidator />
                <FluentCheckbox @bind-Value="@_formData.IsValid" Label="Is valid" />
                <FluentValidationSummary Style="color:darkred" />
            </FluentEditForm>
        </FluentWizardStep>
        <FluentWizardStep Label="Summary">
            <h1>Summary</h1>
        </FluentWizardStep>
    </Steps>
    <ButtonTemplate>
        @{
            var index = context;
            var lastStepIndex = 2;

            <div />
            <FluentSpacer />
            <div>
                @if (index > 0)
                {
                    <FluentButton OnClick="@(() => _wizard.GoToStepAsync(this._currentPage - 1))" Appearance="Appearance.Accent">Previous</FluentButton>
                }
                @if (index != lastStepIndex)
                {
                    <FluentButton OnClick="@(() => _wizard.GoToStepAsync(this._currentPage + 1, true))" Appearance="Appearance.Accent">Next</FluentButton>
                }
            </div>
        }
    </ButtonTemplate>
</FluentWizard>

@code {
    private FluentWizard _wizard = default!;
    private int _currentPage;
    private FormData _formData = new FormData();

    private class FormData
    {
        [AllowedValues(true)]
        public bool IsValid { get; set; }
    }
}

In this example, it is possible to navigate from the first step to the second step, even tough the evaluation should fail when the checkbox is not checked. Validation is never executed:

@page "/fluentwizard-gotonextstep-possible"

<FluentWizard StepperPosition="@StepperPosition.Top"
              StepSequence="@WizardStepSequence.Visited"
              DisplayStepNumber="@(WizardStepStatus.Current | WizardStepStatus.Next)"
              Border="WizardBorder.Outside"
              @bind-Value="@this._currentPage"
              @ref="@_wizard">
    <Steps>
        <FluentWizardStep Label="Step with validation">
            <h1>Step with validation</h1>
            <FluentEditForm Model="_formData" FormName="validationForm">
                <DataAnnotationsValidator />
                <FluentCheckbox @bind-Value="@_formData.IsValid" Label="Is valid" />
                <FluentValidationSummary Style="color:darkred" />
            </FluentEditForm>
        </FluentWizardStep>
        <FluentWizardStep Label="Summary">
            <h1>Summary</h1>
        </FluentWizardStep>
    </Steps>
    <ButtonTemplate>
        @{
            var index = context;
            var lastStepIndex = 1;

            <div />
            <FluentSpacer />
            <div>
                @if (index > 0)
                {
                    <FluentButton OnClick="@(() => _wizard.GoToStepAsync(this._currentPage - 1))" Appearance="Appearance.Accent">Previous</FluentButton>
                }
                @if (index != lastStepIndex)
                {
                    <FluentButton OnClick="@(() => _wizard.GoToStepAsync(this._currentPage + 1, true))" Appearance="Appearance.Accent">Next</FluentButton>
                }
            </div>
        }
    </ButtonTemplate>
</FluentWizard>

@code {
    private FluentWizard _wizard = default!;
    private int _currentPage;
    private FormData _formData = new FormData();

    private class FormData
    {
        [AllowedValues(true)]
        public bool IsValid { get; set; }
    }
}

[dvoituron]

Will be fixed in the next Release: See #2944

[smedjes]

Hello @dvoituron!
Is there a beta I can use until this is released?

[dvoituron]

Hello @dvoituron! Is there a beta I can use until this is released?

Yes: https://github.com/microsoft/fluentui-blazor/blob/dev/docs/using-latest-daily.md

[vnbaaij]

And there is also https://www.nuget.org/packages/Microsoft.FluentUI.AspNetCore.Components/4.11.0-beta.1 on NuGet