You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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<string> 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
The text was updated successfully, but these errors were encountered:
🐛 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
🤔 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
The text was updated successfully, but these errors were encountered: