Blazor FluentUI: SelectedOptionChanged with enum

I am using FluentUI for Blazor WASM in version 4.10.3 and I have a FluentSelect component that I want to call a function when changed. The default is empty (null), which is fine, but when I call the function OnEnumOptionChanged the new value is also null and not the selected item (which I would expect).

My FluentSelect component

<FluentSelect TOption="EnumOption?" SelectedOptionChanged="OnEnumOptionChanged">
    <FluentOption Value="@EnumOption.Blue.ToString()">Blue</FluentOption>
    <FluentOption Value="@EnumOption.Red.ToString()">Red</FluentOption>
    <FluentOption Value="@EnumOption.Green.ToString()">Green</FluentOption>
</FluentSelect>

My callback function

private void OnRedactOptionChanged(EnumOption? enumOption)
{
    // enumOption is null not the selected value
    Logger.LogInformation("Selected option {EnumOption}", enumOption);
}

How can I fix this to show the selected EnumOption in the callback function? I do not want to use bind.

You could try this below option:

Option 1:

By using Items as @Dimitris Maragkos suggested:

@page "/"
@using FluentSelectExample.Shared
@using Microsoft.FluentUI
@using System.Linq
@using Microsoft.FluentUI.AspNetCore.Components

<h3>FluentSelect Enum</h3>

<FluentSelect TOption="EnumOption?"
              Items="Enum.GetValues<EnumOption>().Cast<EnumOption?>()"
              SelectedOptionChanged="OnEnumOptionChanged" />

<p>Selected option: @SelectedOptionText</p>

@code {
    private string SelectedOptionText = "None";

    private void OnEnumOptionChanged(EnumOption? selectedOption)
    {
        SelectedOptionText = selectedOption.HasValue ? selectedOption.ToString() : "None";
        Console.WriteLine($"Selected option: {SelectedOptionText}");
    }
}

Option 2:

Using ValueChanged

@page "/"
@using FluentSelectExample.Shared
@using Microsoft.FluentUI
@using Microsoft.FluentUI.AspNetCore.Components

<h3>FluentSelect Enum</h3>

<FluentSelect TOption="EnumOption?"
              ValueChanged="@(args => OnValueChanged(args?.ToString()))">
    <FluentOption Value="@EnumOption.Blue.ToString()">Blue</FluentOption>
    <FluentOption Value="@EnumOption.Red.ToString()">Red</FluentOption>
    <FluentOption Value="@EnumOption.Green.ToString()">Green</FluentOption>
</FluentSelect>

<p>Selected option: @SelectedOptionText</p>

@code {
    private string SelectedOptionText = "None";

    private void OnValueChanged(string? selectedOptionString)
    {
        if (Enum.TryParse<EnumOption>(selectedOptionString, out var selectedOption))
        {
            SelectedOptionText = selectedOption.ToString();
        }
        else
        {
            SelectedOptionText = "None";
        }

        Console.WriteLine($"Selected option: {SelectedOptionText}");
    }
}

Option 3:

Use a Wrapper Property to Bind the Enum.

@page "/"
@using FluentSelectExample.Shared
@using Microsoft.FluentUI
@using Microsoft.FluentUI.AspNetCore.Components

<h3>FluentSelect Enum</h3>

<FluentSelect TOption="string"
              ValueChanged="@(args => SelectedEnumOptionString = args)">
    <FluentOption Value="@EnumOption.Blue.ToString()">Blue</FluentOption>
    <FluentOption Value="@EnumOption.Red.ToString()">Red</FluentOption>
    <FluentOption Value="@EnumOption.Green.ToString()">Green</FluentOption>
</FluentSelect>

<p>Selected option: @SelectedEnumOption</p>

@code {
    private EnumOption? SelectedEnumOption { get; set; } = null;

    private string? SelectedEnumOptionString
    {
        get => SelectedEnumOption?.ToString();
        set
        {
            if (Enum.TryParse(value, out EnumOption parsedEnum))
            {
                SelectedEnumOption = parsedEnum;
                Console.WriteLine($"Selected option: {SelectedEnumOption}");
            }
        }
    }
}

Result: