fix: Fluent Checkbox events get called infinitely in a Fluent Tab

[denispaluca]

🐛 Bug Report

Having a FluentCheckbox (or a FluentSwitch) inside a FluentStack inside a component which is inside a FluentTab (or possibly a RenderFragment) on the current component cause the ValueChanged event to be called infinitely setting and unsetting the value. This happens when the ValueChanged is set manually.

💻 Repro or Code Sample

CheckboxBug.razor

@using Microsoft.FluentUI.AspNetCore.Components
<FluentStack Orientation="Orientation.Vertical">
    <FluentCheckbox 
        Value="@Value.IsChecked"
        ValueChanged="(isChecked) => ChangeDummyAsync(Value with {IsChecked = isChecked})">Checkbox</FluentCheckbox>

</FluentStack>



@code {

    [Parameter, EditorRequired]
    public required Dummy Value { get; set; }

    [Parameter]
    public EventCallback<Dummy> ValueChanged { get; set; }

    private Task ChangeDummyAsync(Dummy dummy)
    {
        return ValueChanged.InvokeAsync(dummy);
    }

}

Index.razor

@page "/"

@using BlazorApp2.Pages
@using Microsoft.FluentUI.AspNetCore.Components

<FluentTabs>
    <FluentTab Label="Tab1">
        <CheckBoxBug @bind-Value=@dummy />
    </FluentTab>
</FluentTabs>

@code {
    private Dummy dummy = new Dummy(false);
}

Dummy.cs

namespace BlazorApp2.Pages;

public record Dummy(bool IsChecked);

🤔 Expected Behavior

The bool value should be changed.

😯 Current Behavior

The checkbox checks and unchecks infinitely. ValueChanged is called multiple times.

💁 Possible Solution

🔦 Context

Trying to change multiple bool properties of a record with a specific component.

🌍 Your Environment

• OS & Device: Windows on PC
• .NET and Fluent UI Blazor library Version 8.0.2 and 4.7.2

[vnbaaij]

It is the Tab component that is causing this. Without it the checkbox can be set/unset fine.

As the Tab relies on the underlying web component script and they are busy working on the next version (see microsoft/fast#6955). I'm not expecting a fix for this anytime soon (if at all).

I suggest you look for a different mechanism of displaying your UI instead of with Tabs

[denispaluca]

@vnbaaij In the example above if you remove FluentStack from the CheckBoxBug component it functions as expected.

[vnbaaij]

Good find! Really weird as a Stack is nothing more than a div with some styling...

[denispaluca]

@vnbaaij I think it is the use nested of RenderFragment (the children of the FluentStack) that is messing it up.