CODEWITHSUNDEEP
blazorblazor-webassemblyfluent-ui.net-9.0
DrXSsive
DrXSsive

Reputation: 175

Multi selection is not working for Blazor FluentListbox

I am using Blazor FluentUI and got a problem. The multi select in FluentListbox is not working. Even though it says in the docs:

If true, the user can select multiple elements. ⚠️ Only available for the FluentSelect and FluentListbox components.

The @rendermode I am using here is InteractiveWebAssembly. Data is coming from the API call. Here is my code:

<FluentListbox TOption="DropDown.Item"
               Items="@RolesDropdownData?.Items"
               Id="roles-listbox"
               Multiple="true"
               OptionValue="@(p => p.Id)"
               OptionText="@(p => p.Value)"
               @bind-SelectedOptions="@SelectedRoles"
               Class="w-100 mb-10" />

@code {
    private GetUserById.Response? UserResponse;
    private DropDown? RolesDropdownData;

    IEnumerable<DropDown.Item>? SelectedRoles;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            var userTask = userService.GetUserByIdAsync(Content);
            var rolesDropdownDataTask = dropDownService.GetRolesDataAsync();

            await Task.WhenAll(userTask, rolesDropdownDataTask);

            UserResponse = await userTask;
            RolesDropdownData = await rolesDropdownDataTask;

            StateHasChanged();
        }
    }
}

I have enabled Multiple true but still it is not allowing me select multiple options at once as shown in image: enter image description here

Am I missing something here?

Thanks in advance.

Upvotes: 1

Views: 87

Answers (1)

Henk Holterman
Henk Holterman

Reputation: 273774

I could reproduce your problem using a FluentListbox with dotnet 9 and Microsoft.FluentUI.AspNetCore.Components Version="4.11.0".
To be clear: the actual selection works Ok but the selected options (except the last) are not rendered as selected. The user has no visual clues.

But the solution is simple. Just replace the <FluentListbox .. /> with a <FluentSelect ... /> with the same properties. The Multiple="true" will make it always expand and look like a listbox.

I think this is more or less a documentation problem. The website does mention the Multiple property for both components but the actual use is only explained and demonstrated for the FluentSelect.

Upvotes: 0

Related Questions