Blazor Server中MudSelect点击箭头后下拉项延迟显示问题

针对Blazor Server中MudSelect点击箭头后偶尔出现下拉列表为空、延迟加载的问题，可通过以下几个方向解决：

1. 确保UI状态正确触发更新 #

Blazor Server的异步操作有时不会自动触发组件重渲染，导致数据加载完成后UI未及时更新。在数据加载前后手动调用StateHasChanged()，强制组件刷新：

protected override async Task OnInitializedAsync()
{
    IsLoading = true;
    StateHasChanged(); // 立即显示加载骨架
    await GetProgramsAsync();
    IsLoading = false;
    StateHasChanged(); // 确保数据加载完成后更新下拉选项
}

2. 加载期间禁用下拉组件 #

在数据未加载完成时，禁用MudSelect防止用户提前点击，避免出现空下拉的情况：

<MudSelect T="int" ValueChanged="OnProgramChange" Value="DemandModel.ToProgramId"
           Label="Identifiant"
           Variant="Variant.Text" ReadOnly="ReadOnly"
           For="@(() => DemandModel.ToProgramId)"
           Disabled="@IsLoading"> <!-- 加载状态下禁用 -->

3. 检查共享状态的线程安全 #

如果EnumState.Programs是跨组件共享的状态，确保数据更新操作在UI线程执行，或使用线程安全集合（如ConcurrentBag<T>），避免因线程竞争导致UI读取到不完整的数据。

4. 升级MudBlazor版本 #

部分旧版本的MudSelect存在渲染逻辑bug，建议升级到最新稳定版，排查是否是框架已知问题导致的延迟。

修改后的完整代码示例 #

<MudItem xs="12" sm="6">
    @if (IsLoading)
    {
        <MudSkeleton Width="100%" Height="56px" Animation="Wave" />
    }
    else
    {
        <MudSelect T="int" ValueChanged="OnProgramChange" Value="DemandModel.ToProgramId"
                   Label="Identifiant"
                   Variant="Variant.Text" ReadOnly="ReadOnly"
                   For="@(() => DemandModel.ToProgramId)"
                   Disabled="@IsLoading">
            <MudSelectItem Value="0">@(string.Empty)</MudSelectItem>
            @foreach (var program in EnumState.Programs)
            {
                <MudSelectItem Value="@program.Id">
                    @(CultureInfo.CurrentCulture?.Name == "fr-FR" ? program.NameFr : program.NameEn)
                </MudSelectItem>
            }
        </MudSelect>
    }
</MudItem>

@code {
    private bool IsLoading = false;

    protected override async Task OnInitializedAsync()
    {
        IsLoading = true;
        StateHasChanged();
        await GetProgramsAsync();
        IsLoading = false;
        StateHasChanged();
    }

    private async Task GetProgramsAsync()
    {
        // 替换为实际的数据获取逻辑（API调用、数据库查询等）
        await Task.Delay(1000);
        EnumState.Programs = new List<Program>
        {
            new Program { Id = 1, NameFr = "Programme 1", NameEn = "Program 1" },
            new Program { Id = 2, NameFr = "Programme 2", NameEn = "Program 2" }
        };
    }

    private void OnProgramChange(int value)
    {
        DemandModel.ToProgramId = value;
    }

    // 示例模型类，根据实际项目调整
    public class Program
    {
        public int Id { get; set; }
        public string NameFr { get; set; }
        public string NameEn { get; set; }
    }

    public static class DemandModel
    {
        public static int ToProgramId { get; set; }
    }

    public static class EnumState
    {
        public static List<Program> Programs { get; set; } = new List<Program>();
    }
}

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