MudBlazor多选组件文本字段不更新及显示重叠问题排查

1. 解决未选择时第一个选项文本覆盖标签的问题 #

当MudSelect开启多选且绑定集合为空时，若未设置Placeholder，组件会错误渲染第一个选项的文本覆盖标签。只需显式设置Placeholder属性即可解决：

<MudSelect T="MyEnum" MultiSelection="true" @bind-SelectedValues="@selectedEnums" 
           Label="选择枚举值" Placeholder="">
    @foreach (var enumValue in Enum.GetValues<MyEnum>())
    {
        <MudSelectItem Value="enumValue">@enumValue.ToString()</MudSelectItem>
    }
</MudSelect>

如果需要提示文本，可将Placeholder设为"请选择"这类字符串。

2. 解决选择后文本不更新的问题 #

MultiSelectionTextFunc返回正确文本但UI不更新，是因为绑定的普通数组无法触发Blazor组件重新渲染。需将绑定集合替换为ObservableCollection<MyEnum>，集合变更时会自动通知组件更新：

步骤1：替换集合类型 #

在组件代码中修改集合定义：

using System.Collections.ObjectModel;

private ObservableCollection<MyEnum> selectedEnums = new();

步骤2：保留MultiSelectionTextFunc配置 #

确保函数正确绑定，实时返回选中项的描述文本：

<MudSelect T="MyEnum" MultiSelection="true" @bind-SelectedValues="@selectedEnums" 
           Label="选择枚举值" Placeholder=""
           MultiSelectionTextFunc="@(values => $"已选 {values.Count} 项")">
    @foreach (var enumValue in Enum.GetValues<MyEnum>())
    {
        <MudSelectItem Value="enumValue">@enumValue.ToString()</MudSelectItem>
    }
</MudSelect>

修改后，选中项变化时ObservableCollection会触发组件重新渲染，MultiSelectionTextFunc的返回值会实时显示在组件上。

内容的提问来源于stack exchange，提问作者rickyz