[dev-v5] Add a generic FluentOption<TOption> #4456
Merged
Conversation
|
✅ All tests passed successfully Details on your Workflow / Core Tests page. |
Summary - Unit Tests Code CoverageSummary
CoverageMicrosoft.FluentUI.AspNetCore.Components - 98.8%
|
Collaborator
|
@dvoituron the current code works with non nullable properties. However selection via code does not work properly yet. Add <FluentButton OnClick="() => SelectedLanguageId = 1">Select C#</FluentButton>to the sample and then hit it. The value changes but not the displayed one on the dropdown. Using null as option breaks the component. See this code for reference: <FluentSelect Label="Language" @bind-Value="@SelectedLanguageId">
<FluentOption TOption="int?" Value="null"></FluentOption>
@foreach (var language in Languages)
{
<FluentOption Value="@language.Id">
@language.Name
</FluentOption>
}
</FluentSelect>
<div>
Selected: @(SelectedLanguageId?.ToString() ?? "<NULL>")
</div>
@code {
int? SelectedLanguageId;
static Language[] Languages = new Language[]
{
new(1, "C#"),
new(2, "Java"),
new(3, "Python"),
new(4, "JavaScript"),
new(5, "Go")
};
record Language(int Id, string Name);
} |
Collaborator
Author
The |
Collaborator
When I want to provide a manual item then I have to. <FluentOption TOption="int?" Value="null"></FluentOption>This item should mimic the default state and allows the user to unselect a previous selected option. |
Collaborator
MarvinKlein1508
left a comment
MarvinKlein1508
left a comment
There was a problem hiding this comment.
I did some testing and it works pretty well so far. I would update the language sample to having a null value as well.
For example:
<!-- Using Items -->
<FluentSelect Label="Language"
Items="@Languages"
@bind-Value="@SelectedId1"
OptionText="@(i => i.Name)"
OptionBindedValue="@(i => i.Id)" />
<!-- Using FluentOptions -->
<FluentSelect Label="Language"
TOption="Language"
TValue="int?"
@bind-Value="@SelectedId2">
<FluentOption TValue="int?" Value="null">--- Select ---</FluentOption>
@foreach (var language in Languages)
{
<FluentOption TValue="int?" Value="@language.Id">
@language.Name
</FluentOption>
}
</FluentSelect>
<div>
IDs: (@SelectedId1, @SelectedId2)
</div>
@code {
int SelectedId1 = 3;
int? SelectedId2 = 3;
static Language[] Languages = new Language[]
{
new(1, "C#"),
new(2, "Java"),
new(3, "Python"),
new(4, "JavaScript"),
new(5, "Go")
};
record Language(int Id, string Name);
}In vanilla Blazor this part is representing <option value=""></option> for setting back to null for any nullable type.
Also I have noticed that setting the selected items via code is not working as expected.
Try adding this 3 buttons to the language demo
<FluentButton OnClick="() => SelectedId1 = 1">Set first to C#</FluentButton>
<FluentButton OnClick="() => SelectedId2 = 1">Set second to C#</FluentButton>
<FluentButton OnClick="() => SelectedId2 = null">Set second to null</FluentButton>Initial state:
When I press on Set first to C#:
Collaborator
|
btw. these changes also fix #4295 for me |
…-v5/fluent-option-typed
…and OptionValue to OptionValueToString (formats value for HTML)
Collaborator
|
@dvoituron there is still an issue when setting the second language example via code. <FluentButton OnClick="() => SelectedId1 = 1">Set first to C#</FluentButton>
<FluentButton OnClick="() => SelectedId2 = 1">Set second to C#</FluentButton>
<FluentButton OnClick="() => SelectedId2 = null">Set second to null</FluentButton>First button works fine. The other two are changing the value but the dropdown will still display the wrong one. |
Collaborator
Author
No. This is a Blazor behavior: you need to add ’@key’ to fix that. I added this info in the markdown page (below the example) |
MarvinKlein1508
approved these changes
Jan 14, 2026
vnbaaij
approved these changes
Jan 14, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
[dev-v5] Add a generic FluentOption
This pull request introduces a generic
FluentOption<TOption>component, enabling type-safe options for FluentSelect, FluentCombobox, and related components, and updates supporting infrastructure and samples accordingly.Example:
Unit Tests
100%: Updated