如何让启用MultiSelection的MudBlazor MudSelect显示默认选中值？

I've run into this exact issue with MudBlazor's MudSelect multi-select component before. The problem stems from how you're initializing the SelectedValues property—you're passing a one-time new HashSet<Location>(Config) instead of binding to a tracked variable that the component can sync with. Here's how to fix it:

Root Cause #

When you set SelectedValues="new HashSet<Location>(Config)" directly in the component, MudSelect doesn't have a way to monitor changes to that value (since it's a new instance every render). Even though the options are marked as selected when you open the dropdown, the component's display text doesn't update because it's not linked to a variable that it can track for state changes.

Solution Code #

Update your MyComponent.razor to use a private tracked variable for selected values, bind it to MudSelect, and sync it with the Config parameter:

@using BlazorRepl.UserComponents
<MudPaper Elevation="3">
    <MudSelect Label="Locations" 
               @bind-SelectedValues="_selectedLocations" 
               T="Location" 
               MultiSelection="true" >
        @foreach (Location val in Enum.GetValues(typeof(Location)))
        {
            <MudSelectItem Value="val" />
        }
    </MudSelect>
</MudPaper>
@code {
    private HashSet<Location> _selectedLocations;

    [Parameter]
    public List<Location> Config { get; set; }
    [Parameter]
    public EventCallback<List<Location>> OnConfigChanged { get; set; }

    protected override void OnInitialized()
    {
        base.OnInitialized();
        // Initialize selected values from the Config parameter
        _selectedLocations = new HashSet<Location>(Config ?? new List<Location>());
    }

    // Sync selected values if the Config parameter updates from the parent
    protected override void OnParametersSet()
    {
        base.OnParametersSet();
        if (Config != null && !Utilities.EnumListEquals(Config, _selectedLocations.ToList()))
        {
            _selectedLocations = new HashSet<Location>(Config);
        }
    }

    // Handle changes to selected values and sync back to parent
    private async Task SelectedValuesChanged(HashSet<Location> val)
    {
        var newConfig = val.ToList();
        if (!Utilities.EnumListEquals(newConfig, Config))
        {
            Config = newConfig;
            await OnConfigChanged.InvokeAsync(Config);
        }
    }
}

Key Changes Explained #

1. Tracked Variable: _selectedLocations is a private variable that MudSelect can bind to. This allows the component to detect when values change and update its display accordingly.
2. 双向绑定 (@bind-SelectedValues): This replaces the one-time SelectedValues assignment, creating a two-way sync between the component's UI and your variable.
3. OnParametersSet: Ensures that if the parent component updates the Config parameter after initialization, the selected values in MudSelect will sync to match.
4. Async Event Handling: Updated SelectedValuesChanged to be async to properly handle the EventCallback.InvokeAsync call (synchronous calls here can lead to UI update issues).

Your Main.razor and stuff.cs files can remain as-is—this fix is isolated to the child component where the MudSelect is implemented.

内容的提问来源于stack exchange，提问作者Brian Seim at EvoDynamic Inc