How to two-way-bind a value in FluentListBox

Question

I am trying to bind a value from a FluentListBox to a variable via the following code:

    @using Microsoft.Fast.Components.FluentUI;
    @page "/test"
    
    <FluentListbox @bind-Value=_value>
        <FluentOption Value=@("First Value")>First Value</FluentOption>
        <FluentOption Value=@("Second Value")>Second Value</FluentOption>
        <FluentOption Value=@("Third Value")>Third Value</FluentOption>
    </FluentListbox>
    <h1>@_value</h1>
    
    @code {
        private string _value = string.Empty;
    }

Trying this out in a new Blazor project shows that _value does not change when selecting a new value. When I manually set _value to "First Value", then it also shows as selected in the FluentListBox. So binding works atleast in one-way, but not the other.

When I add a FluentSelect-Component with the same values and also bind _value to that, then I can change the value via the FluentSelect and can also observe how the selection in the FluentListBox changes.

So how do I achieve similar behaviour in the FluentListBox. How can I bind _value to FluentListBox, so selecting "Second Value" sets _value to "Second Value"

Answer 1

I think you answer is here, in the docs:

The fluent-listbox component has no internals related to form association. For a form-associated listbox, see the fluent-select component.

I experimented a little but the FluentListbox refuses to trigger any of the onchange logic.
The FluentSelect component works as expected.

The JavaScript specifications mention selectedOptions and selectedIndex but I can't see any implementation for those in the Blazor wrappers. Also, there are no events defined. It is described as "a building block for other components".

You can use the ListBox to display a list and make Single or Multiple selections but I see no way of getting that selection.