1

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"

Ascendise
  • 189
  • 1
  • 10
  • Can you please clarify what is a `FluentListbox`? – MrC aka Shaun Curtis Aug 26 '22 at 08:45
  • @MrCakaShaunCurtis `FluentListbox` is a component from the `Microsoft.Fast.Components.FluentUI` - Package – Ascendise Aug 26 '22 at 08:49
  • 2
    I was intrigued to find the library so I've tested it and .... it don't work. There's no `@onchange` event raised. Excuse me for asking but why *Microsoft.Fast.Components.FluentUI* with Blazor? I haven't seen any questions on here about it. – MrC aka Shaun Curtis Aug 26 '22 at 11:07
  • @MrCakaShaunCurtis So I guess this is a bug. In that case I open a bug report, thank you. To answer your question, the project is an App for Microsoft Teams and Fluent UI just fits the design of Microsoft Teams. And my workplace works with .NET so thats why I make this in Blazor :) – Ascendise Aug 26 '22 at 11:19
  • Yes, unless both of us missed some obvious thing we are supposed to do in configuration. It's set up correctly for normal Blazor components. Good luck. – MrC aka Shaun Curtis Aug 26 '22 at 11:25

2 Answers2

2

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.

H H
  • 263,252
  • 30
  • 330
  • 514
0

@Henk is correct. There is no @onchange logic in place as the underlying does not fire the necessary event(s). He isalso right in that the specs mention selectedOptions and selectedIndex but those are JavaScript attributes and we can't get to those from Blazor.