Skip to content

fix: Modifying the SelectedOptions in FluentSelect #2314

@beowulf29a

Description

@beowulf29a

🐛 Bug Report

Unable to "deselect" options from the FluentSelect component when Multiple=true.

💻 Repro or Code Sample

@page "/selectTest"
 
 
<FluentCheckbox ValueChanged="ToggleSelectAll" Label="Select All" />
 
<FluentSelect TOption="string"
              Items="@PossibleStrings"
              Multiple="true"
              @bind-SelectedOptions="@SelectedStrings"
              Width="100%" />
 
 
@code {
    IEnumerable<string> PossibleStrings { get; set; } = new List<string>()
    {
        "Test 1",
        "Test 2",
        "Test 3",
        "Test 4",
        "Test 5",
        "Test 6",
        "Test 7",
        "Test 8",
        "Test 9",
        "Test 10"
    };
 
    IEnumerable<string> SelectedStrings { get; set; } = [];
 
    void ToggleSelectAll(bool isChecked)
    {
        if (isChecked)
        {
            SelectedStrings = PossibleStrings;
        }
        else
        {
            SelectedStrings = [];
        }
    }
}

🤔 Expected Behavior

I would expect that clearing the bound "SelectedOptions" will also reset the internal collection of what indices are

😯 Current Behavior

Clearing the bound collection doesn't update the UI with the items which are selected.

💁 Possible Solution

🔦 Context

I would like to be able to have a select all/deselect all option associated with my multi-select FluentSelect component.

🌍 Your Environment

Windows
Edge
.NET 8.0.3 & FluentUI 4.8.1

  • OS & Device: [e.g. MacOS, iOS, Windows, Linux] on [iPhone 7, PC]
  • Browser [e.g. Microsoft Edge, Google Chrome, Apple Safari, Mozilla FireFox]
  • .NET and Fluent UI Blazor library Version [e.g. 8.0.2 and 4.4.1]

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions