fix: Submit action on form inside FluentWizardStep with DeferredLoading fire multiple times

[Hwiet]

🐛 Bug Report

When a FluentWizardStep with DeferredLoading contains a form with an submit callback (doesn't matter if it is passed to OnSubmit, OnValidSubmit, OnInvalidSubmit), the callback is fired multiple times, equal to the number of times the step was visited.

💻 Repro or Code Sample

GitHub repository here or recreate something that looks like this that makes it easy to see if a submit action is firing multiple times in a row. Then visit the DeferredLoading step multiple times.

<FluentWizard>
    <Steps>
        <FluentWizardStep Label="Intro">Intro</FluentWizardStep>

        <FluentWizardStep Label="Get started" DeferredLoading>
            <FluentEditForm Model="GetStartedModel" OnSubmit="@(() => ShowSubmitMessageAsync("GetStarted"))">
                GetStarted
            </FluentEditForm>
        </FluentWizardStep>

        <FluentWizardStep Label="Set budget">Set Budget</FluentWizardStep>
    </Steps>
</FluentWizard>

🤔 Expected Behavior

If a wizard step contains a form that has a submit callback, the callback should only be called once when going to the next step, whether or not the step has DeferredLoading or not.

😯 Current Behavior

When I revisit a step with DeferredLoading with a submit callback, the callback is called twice (or more if you keep revisiting the step)

🌍 Your Environment

• OS & Device: Windows on PC
• Browser: Microsoft Edge
• .NET 9 and Fluent UI Blazor 4.10.4

[TumypB]

I have the same issue with Google Chrome.

[MarvinKlein1508]

I can confirm this issue as well. I did some investigation on this and the main cause for this issue seems to be that the EditForm will always be registered to the FluentWizardStep whenever the component will be rendered again. Since DeferredLoading will result in a new reference to a new EditForm everytime.

See:

fluentui-blazor/src/Core/Components/EditForm/FluentEditForm.cs

Line 19 in a83077b

if (WizardStep is not null && EditContext is not null)

So everytime the component will be rendered again another EditForm will be added to the internal list. Each EditForm will then be invoked here:

fluentui-blazor/src/Core/Components/Wizard/FluentWizardStep.razor.cs

Line 166 in a83077b

foreach (var editForm in _editForms)

To fix this we can clear all EditForm objects from the list in OnStepChangeHandlerAsync. For example:

protected virtual async Task<FluentWizardStepChangeEventArgs> OnStepChangeHandlerAsync(FluentWizardStepChangeEventArgs args)
{
    if (_steps[Value].OnChange.HasDelegate)
    {
        await _steps[Value].OnChange.InvokeAsync(args);
    }

    if (_steps[Value].DeferredLoading && !args.IsCancelled)
    {
        _steps[Value].ClearEditFormAndContext();
    }

    return args;
}

this also requires a way to clear the list from the FluentWizardStep. I've tested it with a basic function like this:

public void ClearEditFormAndContext()
{
    _editForms.Clear();
}

@dvoituron, @vnbaaij let me know what you think and will proceed to create a PR for this.

[vnbaaij]

@MarvinKlein1508 yes, that seems like a good solution. Please create/submit a PR for it. Thanks!