FluentCheckbox or FluentSwitch does not show correct first checked state in EditForm

[michaelc06]

🐛 Bug Report

The checked state does not show on first check when FluentCheckbox or FluentSwitch is used in EditForm. Clicking on it 3 times will show the correct checked state.

💻 Repro or Code Sample

Counter.razor.txt

🤔 Expected Behavior

Show the correct checked state.

😯 Current Behavior

Not showing the correct checked state on first check.

💁 Possible Solution

Workaround: use checked and onchange instead of @bind-Value

<FluentCheckbox checked="@Content.IsChecked" @onchange="@(() => Content.IsChecked = !Content.IsChecked)">Check test</FluentCheckbox>

🔦 Context

🌍 Your Environment

• OS & Device: Windows 10
• Browser: Microsoft Edge, Google Chrome, Mozilla FireFox, Opera
• .NET6.0 and Microsoft.Fast.Components.FluentUI Version 3.3

[ggomarighetti]

As far as I understand, you have in a blazor component, an editform which has as context the variable Content of type TestData, which to initiate it or to load it, in the cases in which you request the information and IsChecked returns true, the checkbox corresponding to that property, is not represented selected.

The code that you passed, as far as I understand, is a reference code and not the real case where your problem happens, so, I recommend you to check, if after loading the information in a possible OnInitializedAsync or OnAfterRenderAsync method, check that at the end you execute a StateHasChanged() or InvokeAsync(StateHasChanged).

[michaelc06]

Thanks for looking into this. I have tried copying the sample BasicFormFluentUIComponents.razor and Starship.cs and seeing the same issues. Testing this on the server side.

[michaelc06]

Just tested with the latest .Net 8 and seeing the issues if @rendermode InteractiveServer is set.

[ParamITNL]

I am seeing this issue too

A simple example:

<EditForm Model="ViewModel">
  <FluentSwitch @bind-Value="_value1" Label="Test Switch"></FluentSwitch>
</EditForm>

@code {
  private bool _value1;
}

As long as the value of _value1 is false by default, setting it to true the first time using the switch won't be shown. I tested by adding some console logging - This shows setting the value is working, it is only not visually represented by the switch/checkbox control.

when using

<EditForm Model="ViewModel">
  <FluentSwitch @bind-Value="_value1" Label="Test Switch"></FluentSwitch>
</EditForm>

@code {
  private bool _value1 = true;
}

the switch/checkbox components functions as expected.

Hope this helps.

Note: I added the _value1 field as simple example; It does not make a difference if I use this field or a property from the actual ViewModel class - The behavior is the same: Default value true: It works, default value false: 3 clicks needed to see the actual value being represented by the components.