MudSelect 箭头按钮单击打开，但在一定延迟后下拉列表中没有任何项目

Question

在我的 blazor 服务器端应用程序中，我很难弄清楚为什么当我单击下拉列表（MudSelect）时，箭头按钮有时打开，并且没有包含项目的下拉列表并且经过一定的延迟出现下拉列表。

这是单击箭头按钮（打开）但没有下拉列表时的外观图像。

如果有任何帮助，我将不胜感激。

这个我试过了

`<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)">
            <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;
        await GetProgramsAsync();
        IsLoading = false;
     
    }
`

当我单击 MudSelect 上的箭头时，当列表不为空时，我仍然没有任何效果。

Answer 1

首先，我创建一个新示例并使用最新的 MudBlazor 包并检查 MudSelect 组件，一切正常。那么，您能告诉我们您使用的是哪个版本的 MudBlazor 软件包吗？尝试创建一个新应用程序并使用最新的 MudBlazor 来测试它。

当我点击一个时，我很难弄清楚为什么 下拉列表（MudSelect）箭头按钮有时会打开并在那里 没有包含项目的下拉列表，并且经过一定的延迟后 出现下拉列表。

其次，对于这个问题，我建议您检查并尝试以下操作：

1. 应用程序渲染模式。
   无论您使用的是

   ServerPrerendered

   还是

   Server

   渲染模式。众所周知，使用

   ServerPrerendered

   渲染模式，

   OnInitializedAsync

   方法会执行两次。因此，尝试在 _Host.cshtml 中使用

   Server

   渲染模式。

   

   请参阅预渲染。

2. 确保数据加载后状态已更改。
   在

   StateHasChanged();

   方法中调用

   OnInitializedAsync

   ：

    protected override async Task OnInitializedAsync()
    {
        IsLoading = true;
        await GetProgramsAsync();
        IsLoading = false;
        StateHasChanged(); // Add this line to trigger re-render after data load
    }
   

3. 在加载过程中使用 MudSelect

   Disabled

   属性。

    <MudSelect T="int" ValueChanged="OnProgramChange" Value="DemandModel.ToProgramId"
               Label="Identifiant"
               Variant="Variant.Text" ReadOnly="ReadOnly"
               Disabled="@(IsLoading)"
               For="@(() => DemandModel.ToProgramId)">
        <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>
   

最后，使用上述方法，如果问题仍然没有解决，您可以创建一个最小样本来重现问题并与我们分享。