fix: FluentSelect selected item disappears after OnInitializedAsync completes.

[Maintenance-Partnership-Systems]

🐛 Bug Report

Using FluentSelect in a Blazor WebAssembly application, if the OnInitializedAsync includes an await call, then after the await call completes the FluentSelect is set to blank instead of its correct Selected value.

Below is a simplified reproduction based on one of the FluentSelect examples. If you comment out the "await Task.Delay (1000)" it works fine.

🔦 Context

The actual use case that brought this to light was trying to initialise a FluentSelect using a set of option string values obtained from a Web API (via an awaited call in OnIntializedAsync), and then having it pre-select the user's previous last choice from a string value stored in Blazor.LocalStorage.

In that more complex example everything in the underlying data structures had the correct values, right down to the correct Options entry in the options list having its Selected attribute set, but still the dropdown initially fails to reflect the Selected value. Thereafter it works fine (chaning selected value, switching to other tabs in the app and back), but refreshing the page resets the dropdown to the first option, regardless of the underlying data values.

I haven't tested if the behaviour is different for a Blazor Server application.

💻 Repro or Code Sample

@page "/TESTPAGE"

<h4>From a List of Option&lt;string&gt; items</h4>
<p>Second item in the list is initially selected through the <code>OptionSelected</code> (Func delegate) parameter.</p>

<FluentSelect Items=@stringOptions1
               OptionText="@(i => i.Text)"
               OptionValue="@(i => i.Value)"
               OptionSelected="@(i => i.Selected)"
               @bind-Value="@stringValue" />
<p>
    Selected Value: @stringValue<br />
</p>


@code {

  string? stringValue;

  static List<Option<string>> stringOptions1 = new()
    {
        { new Option<string> { Value = "9", Text = "Nine", Icon = (new Icons.Regular.Size24.AppsList(), Color.Neutral, "start" ) } },
        { new Option<string> { Value = "8", Text = "Eight", Selected = true } },
        { new Option<string> { Value = "7", Text = "Seven" } },
        { new Option<string> { Value = "6", Text = "Six" } },
        { new Option<string> { Value = "5", Text = "Five" } },
        { new Option<string> { Value = "4", Text = "Four" } },
        { new Option<string> { Value = "3", Text = "Three" } },
        { new Option<string> { Value = "2", Text = "Two" } },
        { new Option<string> { Value = "1", Text = "One" } }

    };

  protected override async Task OnInitializedAsync ()
  {
    await base.OnInitializedAsync ();
    await Task.Delay (1000);
  }
}

🤔 Expected Behavior

The dropdown should show item "Eight" selected after > 1 second has elapsed.

😯 Current Behavior

Initially the dropdown shows item "Eight" selected. After 1 second the dropdown display goes blank.

Tested Firefox, Edge & Chrome - all have same behaviour.

🌍 Your Environment

Visual Studio 2022, Windows 11
NET 8 Blazor WebAssembly web application,
using Microsoft.FluentUi.AspNetCore.Components 4.10.2
Microsoft.AspNetCore.Components.WebAssembly 8.0.10

[vnbaaij]

It happens on Server as well. We'll look into it.