Blazor下拉组合框(ComboBox)中上下箭头导航时保留输入值的实现问题

我完全懂你遇到的这个头疼问题——在Blazor里用ComboBox的时候，刚输入完内容想用上下箭头浏览下拉过滤后的选项，结果输入框里的文字直接被选中项的内容替换了，非得等用户明确点选或者按回车才替换才合理对吧？咱们来一步步调整你的代码解决这个问题。

首先得指出你现有代码里的几个小问题：

• 你混用了_typeValue和_typedValue（拼写差异），这会导致值没有正确保存
• RestoreTypedValue里直接修改SelectedDataItem.TextValue是不对的，这会改动你的数据源实例，而且没法正确控制输入框的显示内容
• 键盘事件的逻辑分支有点混乱，没有区分“导航选项”和“确认选择”的场景

下面是调整后的完整实现思路和代码：

核心思路 #

我们要把用户输入的显示值和选中项的数据分开维护：

• 用一个单独的字段绑定到ComboBox的输入框，专门显示用户输入的内容
• 上下箭头导航下拉项时，只更新选中项的高亮状态，但不修改输入框的显示值
• 只有当用户按回车、点击选中项时，才把选中项的文本同步到输入框

修正后的代码 #

// 专门用于输入框显示的字段，绑定到ComboBox的输入区域
private string _displayValue = string.Empty;
// 保存用户输入的原始过滤文本，用于导航后恢复
private string _lastTypedValue = string.Empty;
private YourDataModel? SelectedDataItem { get; set; }

// 键盘事件处理
public void KeyPressed(KeyboardEventArgs args)
{
    if (args.Key == "ArrowUp" || args.Key == "ArrowDown")
    {
        // 按下上下箭头时，记录当前输入的内容，避免被选中项替换
        _lastTypedValue = _displayValue;
        // 这里只让ComboBox执行导航逻辑，不更新输入框
        StateHasChanged();
    }
    else if (args.Key == "Enter" && SelectedDataItem != null)
    {
        // 按回车确认选择时，同步选中项的文本到输入框
        _displayValue = SelectedDataItem.TextValue;
        StateHasChanged();
    }
}

// 过滤事件处理
public async Task OnFiltering(FilteringEventArgs value)
{
    try
    {
        if (UIElement.IsCd02 == 1)
        {
            if (!string.IsNullOrEmpty(value.Text) && value.Text.Length >= this.MinLengthTerm)
            {
                _lastTypedValue = value.Text;
                _displayValue = value.Text;
                await this.ReadCombo(value.Text);
            }
            else
            {
                this.DataCollection = this.InitialCollection;
            }
        }
        else
        {
            if (!string.IsNullOrEmpty(value.Text) && value.Text.Length >= 2)
            {
                value.PreventDefaultAction = true;
                var query = new Query().Where(new WhereFilter()
                {
                    Field = "TextValue",
                    Operator = "contains",
                    Value = value.Text, // 修正原代码里的小写value拼写错误
                    IgnoreCase = true
                });
                _lastTypedValue = value.Text;
                _displayValue = value.Text;
                await _comboSelector.FilterAsync(DataCollection, query);
            }
            else
            {
                this.DataCollection = this.InitialCollection;
            }
        }
    }
    catch (Exception e)
    {
        Console.WriteLine(e.Message);
    }
}

// 处理下拉项点击选中的事件（根据你的ComboBox组件回调调整）
public void OnItemSelected(YourDataModel selectedItem)
{
    SelectedDataItem = selectedItem;
    // 用户点击选中时，同步文本到输入框
    _displayValue = selectedItem.TextValue;
    StateHasChanged();
}

额外说明 #

1. 确保你的ComboBox组件的输入框是绑定到_displayValue，而不是SelectedDataItem.TextValue，这样输入框的显示就完全由我们控制了
2. 修正了原代码里WhereFilter的小写value拼写错误，这个小问题会导致过滤逻辑不生效
3. 如果你的ComboBox有内置的选中回调（比如OnValueChanged或OnSelect），一定要在该回调里同步_displayValue，确保用户点击选项时输入框内容正常更新

这样调整后，你用上下箭头导航下拉项时，输入框里的内容会一直保留你输入的文本，只有当你主动点击选项或者按回车确认时，才会替换成选中项的内容，完美符合你的需求。

备注：内容来源于stack exchange，提问作者Kavishka Sandaruwan