Reset combobox value on enter

[sahra-marie]

Hi,
I would need help resetting the combobox value to an empty one.

Scenario:
Adding tags to an object
The user should be able to select a tag (just a string) from the combobox or type their own and click enter to submit.
After that, the combobox should then be emptied so that it's ready for the next input.

However, setting the value or selected option to an empty string does not clear the previously made selection.
I managed to do it via js (searching for the input field inside the combobox and resetting its value), but I'm still wondering if there is a way to achive this more easily without js?

Simplified Code:

<FluentCombobox Items="@Tags" @bind-Option="@SelectedTag" TOption="string" Autocomplete="ComboboxAutocomplete.Both" @onkeydown="EnterKeyPressed"/>

@code {
     public List<string> Tags { get; set; } = new List<string>() {"Fruit", "Vegetable", "Meat", "Fish"};
     public List<string> ChosenTags { get; set; } = new List<string>();
     public string SelectedTag { get; set; } = string.Empty;

     private async Task EnterKeyPressed(KeyboardEventArgs e)
     {
         if (e.Code == "Enter" || e.Code == "NumpadEnter")
         {
             if (!ChosenTags.Contains(SelectedTag) && !string.IsNullOrEmpty(SelectedTag))
             {
                ChosenTags.Add(SelectedTag);
             }

             SelectedTag = string.Empty;
         }   
     }
}

[vnbaaij]

In a ComboBox, if you type a value yourself, the SelectedOption is not valid. You need to bind to the Value. See https://www.fluentui-blazor.net/Combobox#defaultexamples

[sahra-marie]

Resetting the self-typed value now works as expected, but resetting an option still doesn't result in an empty field.