fix: Unexpected Behavior with FluentTabs and FluentTab Components

[jadAzar12]

🐛 Bug Report

There is an unexpected behavior when using the FluentTabs and FluentTab components. Specifically, if the content inside a FluentTab is a child component that contains an EventCallback parameter, and this callback is handled in the parent component, the following issues occur:

OnParametersSetAsync Triggering in the Child Component: Every time the tab is switched in the parent component, the OnParametersSetAsync method in the child component is triggered. This behavior happens even when no parameters have changed.

Issue with EditForm: If the child component contains an EditForm and any bound property changes, OnParametersSetAsync is triggered again inside the child component. This occurs even if the change does not directly relate to the parameters being passed to the child.

Conditions:

This issue only occurs when the parent component is handling the child component’s EventCallback of a Func delegate.

If the parent stops handling the EventCallback, the behavior resolves, and the tabs work as expected without triggering OnParametersSetAsync unnecessarily.

💻 Repro or Code Sample

@page "/ParentComponent"

ParentComponent

Tab one content. This is for testing. @* *@ Tab two content. This is for testing.

    Tab three content. This is for testing.
</FluentTab>

@code {

bool DeferredLoading = false;

string? activeid = "tab-1";
FluentTab? changedto;

private void HandleOnTabChange(FluentTab tab)
{
    changedto = tab;
}

private void HandleSubmit(bool isLoading)
{
   
    Console.WriteLine($"Child submited: {isLoading}");
}

}

ChildComponent

@code {

PersonModel FormData = new PersonModel();
private EditContext? editContext;
[Parameter]
public EventCallback<bool> OnSubmitFinished { get; set; }

private async Task SubmitForm()
{
    try
    {
        await OnSubmitFinished.InvokeAsync(true);
    }
    catch (Exception ex)
    {

    }
}

protected override async Task OnInitializedAsync()
{
    editContext = new EditContext(FormData);
}

public override Task SetParametersAsync(ParameterView parameters)
{
    Console.WriteLine($"SetParametersAsync child");
    return base.SetParametersAsync(parameters);
}

protected override async Task OnParametersSetAsync()
{
    Console.WriteLine($"OnParametersSetAsync child");        
}
private class PersonModel
{
    public string Name { get; set; } = string.Empty;
}

}

🤔 Expected Behavior

The OnParametersSetAsync method in the child component should only be triggered when parameters passed to the child component actually change. It should not be triggered unnecessarily when switching tabs or when properties bound to an EditForm change, provided the parent is handling the EventCallback correctly.

😯 Current Behavior

💁 Possible Solution

🔦 Context

🌍 Your Environment

• Windows
• Google Chrome.
• Blazor WASM .NET 8 and Fluent UI Blazor library Version 4.11.7

[jadAzar12]

Code sample.txt

[vnbaaij]

You need to use 3 tick marks (```) in the GH editor to mark a code block...

[jadAzar12]

i uploaded the code sample in txt file

[vnbaaij]

Next time, if a reproduction requires creating 3 files, then just supply a zipped project or a repo here on GH. This is way too labor intensive to get going for us.

Check with the docs at https://learn.microsoft.com/en-us/aspnet/core/blazor/components/lifecycle?view=aspnetcore-9.0. It is normal OnParametersSetAsync is called when the parent (re)renders.

Think you can solve the behavior for your situation by setting a bool in HandleSubmit to false and make that value be used in the ChildComponent to set ShouldRender to false in the OnParametersSetAsync.

Transfrering this to the discussion area as it is not really an issue, I believe.

[jadAzar12]

what about the case where OnParametersSetAsync is triggered in the child component whenever a property of the bound EditContext is changed ?This behavior happens even when no parameters have changed. This only happens if the parent component is handling an event callback from the child.if the parent does not handle any event callback from the child, it works as expected.