@bind-Value on FluentCombobox binds to the displayed text, not the value

🐛 Bug Report

FluentCombobox should bind to the value of the selected FluentOption, instead of the displayed part.

💻 Repro or Code Sample

I have a Blazor wasm project. When I make a FluentCombobox, and bind a string using @bind-Value, the contents of the string is set to the diplayed part of the combobox.

@page "/ViewCustomers"
<h1>View Customers</h1>
           Selected Value: @selectedCustValue
            <FluentCombobox Autocomplete="Autocomplete.List" @bind-Value="selectedCustValue">
                @foreach (var cust in customers)
                {
                    <FluentOption Value="@cust.Id.ToString()">@cust.Name</FluentOption>
                }
            </FluentCombobox>
 }

@code {

    string selectedCustValue = "";
    List<Customer>? customers = new(
        new []{new Customer{Id = 0, Name = "abc"}});
}

🤔 Expected Behavior

selectedCustValue should contain the value set in the selected FluentOption (“0” in the example)

😯 Current Behavior

The displayed part of the selected FluentOption is set in SelectedCustValue (“abc” in the example)

🔦 Context

I need the id, since I cannot guarantee that the Name value is unique.

🌍 Your Environment

• OS & Device: Windows 11
• Browser Google Chrome
• .NET and FAST Version .NET 6.0 Microsoft.Fast.Components.FluentUI v. 1.1.0 (LAtest NuGet package)

[vnbaaij]

I’m redoing the FluentCombobox, FluentListbox and FluentSelect for V2. A (strongly typed) SelectedItem will be supported there. I also have the Value working as of now, but that does not reflect a typed in value and I don’t think I can get to that typed in value. I guess it depends on what behavior we expect a combobox to have: 1) an alternative to a select where you can search through the list by typing in the input or 2) a combination (hence the name) of an input and a select list where a use can enter free-form text.

[radium-v]

@atmgrifter00 With regards to the specification for combobox, this is expected behavior as described in my previous comment. Having separate values for combobox options can conflict with the ability to enter and submit custom values.

A combobox is like a text input with supplementary predetermined options, whereas a select is like a collapsible listbox. In fact, the element internals for combobox use an input, since unlike select, there is no native control which reflects the accessibility requirements of a user-editable combobox.

The reason a combobox doesn’t use the value of its options comes down to avoiding the potential for user-defined values that are similar, but different, from any pre-configured values (ex. “fooBAR” vs “FOObar”). While the autocomplete functionality can do a basic job of filtering the list and auto-filling potential matches, there’s no way to confirm if a user’s input is an incomplete fuzzy search or a specific custom value.

With that said, there are a few useful ways to get the selected items from the DOM:

• Combobox, Select, and Listbox elements all provide the selectedIndex and selectedOptions properties which can be used to determine which item is currently selected.
• Option elements have a selected boolean property which can be used instead of checking the class.

My own personal experience with Blazor is limited, so I don’t know if getting the element properties would require hooking it up in this project.

One more alternative would be to use the FluentSelect component, which doesn’t allow for direct user-specified values but does use the values of its selected options for its own. It also supports type-ahead to select the first matching option as you start typing while it’s focused.