fix: Unexpected binding behavior in FluentSelect #2382
Description
🐛 Bug Report
There seems to be a problem with the behavior of the FluentSelect component when binding to its SelectedOption property. Changing the selection will correctly update the bound value. However, changing the bound value does not update the selected option.
💻 Repro or Code Sample
@page "/test"
<FluentSelect Items="@(Enum.GetValues<DesignThemeModes>())" @bind-SelectedOption="@Mode" />
<FluentButton OnClick="@(() => Mode = DesignThemeModes.System)">Reset</FluentButton>
@code {
private DesignThemeModes _mode = DesignThemeModes.System;
private DesignThemeModes Mode
{
get
{
Console.WriteLine($"GET: {_mode}");
return _mode;
}
set
{
_mode = value;
Console.WriteLine($"SET: {value}");
}
}
}🤔 Expected Behavior
Binding should work in both directions and updating the value of the bound property should change the component's selected item.
😯 Current Behavior
For example, changing the selection from its initial value of System to Dark and then clicking the Reset button produces the following console sequence where the value is first changed to System and then immediately set back to Dark. The component's selected item is not updated.
GET: System
GET: System
GET: System
GET: System
SET: Dark <== after changing selection to Dark
GET: Dark
GET: Dark
SET: System <== after clicking Reset button
GET: System
GET: System
SET: Dark <== THIS IS UNEXPECTED
GET: Dark
GET: Dark
For comparison, replacing the FluentSelect component with an InputSelect yields a different outcome.
<InputSelect @bind-Value="@Mode">
@foreach (var mode in Enum.GetValues<DesignThemeModes>()) {
<option value="@mode">@mode</option>
}
</InputSelect>
<FluentButton OnClick="@(() => Mode = DesignThemeModes.System)">Reset</FluentButton>The sequence in this case is as expected and the component selection is restored back to System.
GET: System
GET: System
GET: System
GET: System
SET: Dark <== after changing selection to Dark
GET: Dark
GET: Dark
SET: System <== after clicking Reset button
GET: System
GET: System
🌍 Your Environment
- Windows 10
- Microsoft Edge
- .NET 8.0.7, Fluent UI Blazor library 4.9.1