如何让RadzenDropDown仅在弹窗关闭后触发ValueChanged等事件

我在.NET 7 Blazor项目中使用RadzenDropDown控件，遇到一个问题：当用户用键盘打开下拉弹窗，通过上下箭头导航选项时，SelectedItemChanged和ValueChanged事件会在每次切换选项时立即触发。但我希望这些事件只在下拉弹窗关闭、用户确认最终选择时才触发——目前的情况是，用户用箭头键导航时就会触发页面跳转，体验很差。

示例代码：

@using MyNamespace;
@inject WebsiteUrlsConfiguration WebsiteUrlsConfiguration
@inject WebAppInformation AppInfo
@inject NavigationManager NavigationManager

<RadzenDropDown TValue="Environments" Data=@EnvironmentOptions Value=AppInfo.Environment 
  ValueChanged="NavigateToEnvironment" />

@code {
    private IEnumerable<Environments> EnvironmentOptions =
        Enum.GetValues<Environments>()
        .Where(x => x != Environments.Unknown);

    private void NavigateToEnvironment(Environments selectedEnvironment)
    {
        var urlToNavigateTo = WebsiteUrlsConfiguration.GetUrlForEnvironment(selectedEnvironment);
        NavigationManager.NavigateTo(urlToNavigateTo);
    }
}

解决方案 #

1. 优先使用Change事件替代ValueChanged #

RadzenDropDown自带的Change事件只会在用户确认选择（点击选项、按回车键确认，或下拉弹窗关闭）时触发，刚好符合需求。修改后的代码如下：

<RadzenDropDown TValue="Environments" Data=@EnvironmentOptions Value=AppInfo.Environment 
  Change="OnEnvironmentChanged" />

对应的处理方法：

private void OnEnvironmentChanged(ChangeEventArgs args)
{
    if (args.Value is Environments selectedEnvironment)
    {
        var urlToNavigateTo = WebsiteUrlsConfiguration.GetUrlForEnvironment(selectedEnvironment);
        NavigationManager.NavigateTo(urlToNavigateTo);
    }
}

2. 手动检测弹窗状态（备选方案） #

如果需要保留ValueChanged逻辑，也可以通过绑定Open属性判断弹窗状态，仅在弹窗关闭时执行跳转：

<RadzenDropDown TValue="Environments" Data=@EnvironmentOptions Value=AppInfo.Environment 
  ValueChanged="OnValueChanged" @bind-Open=@isDropDownOpen />

private bool isDropDownOpen;
private Environments? pendingEnvironment;

private void OnValueChanged(Environments selectedEnvironment)
{
    if (isDropDownOpen)
    {
        // 弹窗打开时只暂存选择，不跳转
        pendingEnvironment = selectedEnvironment;
    }
    else
    {
        // 弹窗关闭时直接跳转
        NavigateToEnvironment(selectedEnvironment);
    }
}

// 在弹窗关闭后处理暂存的选择
protected override void OnAfterRender(bool firstRender)
{
    base.OnAfterRender(firstRender);
    if (!isDropDownOpen && pendingEnvironment.HasValue)
    {
        NavigateToEnvironment(pendingEnvironment.Value);
        pendingEnvironment = null;
    }
}

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