fix: selection via code doesn't work twice in FluentSelect with manual options

[MarvinKlein1508]

🐛 Bug Report

When you provide all options manually as well as the Selected and OnSelect parameters then setting the value via code only works once.

💻 Repro or Code Sample

Code for the IssueTester

<h4>Selected Option</h4>
<FluentSelect TOption="DayOfWeek?">
	<FluentOption Selected="@(SelectedDayOfWeek is null)" OnSelect="(val) => SelectedDayOfWeek = null">-- Select a day --</FluentOption>
	<FluentOption Selected="@(SelectedDayOfWeek is DayOfWeek.Monday)" OnSelect="(val) => SelectedDayOfWeek = DayOfWeek.Monday">@DayOfWeek.Monday</FluentOption>
	<FluentOption Selected="@(SelectedDayOfWeek is DayOfWeek.Tuesday)" OnSelect="(val) => SelectedDayOfWeek = DayOfWeek.Tuesday">@DayOfWeek.Tuesday</FluentOption>
	<FluentOption Selected="@(SelectedDayOfWeek is DayOfWeek.Wednesday)" OnSelect="(val) => SelectedDayOfWeek = DayOfWeek.Wednesday">@DayOfWeek.Wednesday</FluentOption>
	<FluentOption Selected="@(SelectedDayOfWeek is DayOfWeek.Thursday)" OnSelect="(val) => SelectedDayOfWeek = DayOfWeek.Thursday">@DayOfWeek.Thursday</FluentOption>
	<FluentOption Selected="@(SelectedDayOfWeek is DayOfWeek.Friday)" OnSelect="(val) => SelectedDayOfWeek = DayOfWeek.Friday">@DayOfWeek.Friday</FluentOption>
	<FluentOption Selected="@(SelectedDayOfWeek is DayOfWeek.Saturday)" OnSelect="(val) => SelectedDayOfWeek = DayOfWeek.Saturday">@DayOfWeek.Saturday</FluentOption>
	<FluentOption Selected="@(SelectedDayOfWeek is DayOfWeek.Sunday)" OnSelect="(val) => SelectedDayOfWeek = DayOfWeek.Sunday">@DayOfWeek.Sunday</FluentOption>
</FluentSelect>

<p>SelectedDayOfWeek: @(SelectedDayOfWeek?.ToString() ?? "<NULL>")</p>

<FluentButton OnClick="() => SelectedDayOfWeek = DayOfWeek.Monday">Set to Monday</FluentButton>

@code {

	public DayOfWeek? SelectedDayOfWeek { get; set; }
}

🤔 Expected Behavior

I expect the control to switch it value correctly even on the second time.

😯 Current Behavior

🔦 Context

I'm using this approach to handle null cases. Also some of my options raise custom methods for certain users within my app.

🌍 Your Environment

FluentUI 4.13.1
.NET 9.0.10
Latest Firefox and Edge

[vnbaaij]

Change your code to the following to make it work:

<h4>Selected Option</h4>
<FluentSelect TOption="DayOfWeek?" @bind-Value="day">
	<FluentOption Selected="@(SelectedDayOfWeek is null)" OnSelect="(val) => SelectedDayOfWeek = null">-- Select a day --</FluentOption>
	<FluentOption Selected="@(SelectedDayOfWeek is DayOfWeek.Monday)" OnSelect="(val) => SelectedDayOfWeek = DayOfWeek.Monday">@DayOfWeek.Monday</FluentOption>
	<FluentOption Selected="@(SelectedDayOfWeek is DayOfWeek.Tuesday)" OnSelect="(val) => SelectedDayOfWeek = DayOfWeek.Tuesday">@DayOfWeek.Tuesday</FluentOption>
	<FluentOption Selected="@(SelectedDayOfWeek is DayOfWeek.Wednesday)" OnSelect="(val) => SelectedDayOfWeek = DayOfWeek.Wednesday">@DayOfWeek.Wednesday</FluentOption>
	<FluentOption Selected="@(SelectedDayOfWeek is DayOfWeek.Thursday)" OnSelect="(val) => SelectedDayOfWeek = DayOfWeek.Thursday">@DayOfWeek.Thursday</FluentOption>
	<FluentOption Selected="@(SelectedDayOfWeek is DayOfWeek.Friday)" OnSelect="(val) => SelectedDayOfWeek = DayOfWeek.Friday">@DayOfWeek.Friday</FluentOption>
	<FluentOption Selected="@(SelectedDayOfWeek is DayOfWeek.Saturday)" OnSelect="(val) => SelectedDayOfWeek = DayOfWeek.Saturday">@DayOfWeek.Saturday</FluentOption>
	<FluentOption Selected="@(SelectedDayOfWeek is DayOfWeek.Sunday)" OnSelect="(val) => SelectedDayOfWeek = DayOfWeek.Sunday">@DayOfWeek.Sunday</FluentOption>
</FluentSelect>

<p>SelectedDayOfWeek: @(SelectedDayOfWeek?.ToString() ?? "<NULL>")</p>

<FluentButton OnClick="@(() => { SelectedDayOfWeek = DayOfWeek.Monday; day = "Monday"; })">Set to Monday</FluentButton>

@code {

	public DayOfWeek? SelectedDayOfWeek { get; set; }
	string? day;
}

Because of manual options, the value changed event is not always being propagated. By adding this binding to the value manually, it is hooked up correctly internally.