fix: Cannot reset selection in FluentSelect #2721
Description
🐛 Bug Report
When running FluentSelect with a two-way binding on SelectedOption, resetting Selection Option to null does not reset the FluentSelector to show placeholder text.
💻 Repro or Code Sample
Created new template project from 4.10.0 (https://www.fluentui-blazor.net/Templates)
Change Home.razor to the following:
@page "/"
@rendermode InteractiveServer
<FluentSelect TOption="Option<string>"
Items="@fluentSelectOptions"
Placeholder="Select option"
OptionText="@(v => v?.Text)"
OptionValue="@(v => v?.Value)"
@bind-SelectedOption="@fluentSelectSelectedOption"
Multiple=false />
<FluentCombobox TOption="Option<string>"
Items="@fluentComboboxOptions"
Placeholder="Select option"
OptionText="@(v => v?.Text)"
OptionValue="@(v => v?.Value)"
@bind-SelectedOption="@fluentComboboxSelectedOption"
Multiple=false />
<FluentButton @onclick="ResetSelectedOption"> Reset </FluentButton>
<FluentButton @onclick="Select3"> Select 3 </FluentButton>
@code {
private IEnumerable<Option<string>> fluentSelectOptions = new List<Option<string>>()
{
new Option<string>() { Text = "Option 1", Value ="1" },
new Option<string>() { Text = "Option 2", Value ="2" },
new Option<string>() { Text = "Option 3", Value ="3" }
};
private IEnumerable<Option<string>> fluentComboboxOptions = new List<Option<string>>()
{
new Option<string>() { Text = "Option 1", Value ="1" },
new Option<string>() { Text = "Option 2", Value ="2" },
new Option<string>() { Text = "Option 3", Value ="3" }
};
private Option<string>? fluentSelectSelectedOption { get; set; } = null;
private Option<string>? fluentComboboxSelectedOption { get; set; } = null;
private void ResetSelectedOption()
{
fluentSelectSelectedOption = null;
fluentComboboxSelectedOption = null;
}
private void Select3()
{
fluentSelectSelectedOption = fluentSelectOptions.FirstOrDefault(o => o.Value == "3");
fluentComboboxSelectedOption = fluentComboboxOptions.FirstOrDefault(o => o.Value == "3");
}
}🤔 Expected Behavior
When fluentSelectSelectedOption is set to null, this should reflect in FluentSelect so that it goes back to placeholder text with no current selection.
If no placeholder text is defined, any empty selector should be shown.
😯 Current Behavior
- Run the sample project
- Click Select 3 button.
- Observe that Option 3 is selected both places
- Press Reset button.
- Observe that only FluentCombobox has been reset to placeholder
💁 Possible Solution
🔦 Context
I have a component that has the need to reset a FluentSelect from time to time. I can use FluentCombobox, but then users get the ability to write their own inputs, which is not what we want.
🌍 Your Environment
- OS & Device: Windows on PC
- Browser Microsoft Edge
- .NET and Fluent UI Blazor library Version 8.0.4 and 4.10.0