MudBlazor中MudAutocomplete失焦时不触发ValueChanged问题求助

问题背景 #

使用MudBlazor 6.12.0的MudAutocomplete组件，支持选择预设列表值和手动输入自定义文本，但当用户输入的文本存在于列表中却未通过选择列表项完成输入，直接离开输入框时，组件不会触发ValueChanged函数，导致后续条件判断和逻辑无法执行。

解决方案 #

核心思路是在输入框失去焦点时，手动校验输入文本是否匹配列表项，若匹配则主动更新Value并触发ValueChanged。具体步骤如下：

• 为组件添加OnBlur事件，监听输入框失去焦点的动作
• 在TextChanged中保存当前输入的文本，供后续校验使用
• 在OnBlur事件处理中，调用组件的SearchFunc获取匹配项，手动更新Value并触发ValueChanged

修改后的代码示例 #

Razor组件代码

<MudAutocomplete T="ApplicationTable" @ref="autocompleteref" Label="Select Application Name" Value="@selectedappvalue"
              ToStringFunc="@(e => string.IsNullOrEmpty(e.ApplicationName) ? NameOftheTool : e.ApplicationName)"
              Variant="Variant.Filled" AnchorOrigin="Origin.BottomCenter" Margin="Margin.Dense"
              SearchFunc="SearchAutoComplete"
              ValueChanged="OnValueChanged" TextChanged="OnTextChanged" AutoFocus="true"
              ResetValueOnEmptyText="true" Required="true" RequiredError="App Name is required!"
              Clearable="true" CoerceValue="true" CoerceText="true" Text="@NameOftheTool"
              Counter="200" MaxLength="200"
              OnBlur="HandleBlur" />

C#逻辑代码

private ApplicationTable selectedappvalue;
private MudAutocomplete<ApplicationTable> autocompleteref;
private string currentText;

// 保存当前输入的文本
private void OnTextChanged(string text)
{
    currentText = text;
    // 保留你原有的TextChanged逻辑
}

// 处理输入框失去焦点事件
private async Task HandleBlur()
{
    if (string.IsNullOrEmpty(currentText))
    {
        selectedappvalue = null;
        await OnValueChanged(selectedappvalue);
        return;
    }

    // 调用现有搜索逻辑获取匹配项
    var matchedItems = await SearchAutoComplete(currentText);
    if (matchedItems.Any())
    {
        // 精确匹配输入文本的列表项（可根据需求调整匹配规则）
        var targetItem = matchedItems.FirstOrDefault(item => 
            string.Equals(item.ApplicationName, currentText, StringComparison.OrdinalIgnoreCase));
        
        if (targetItem != null && !EqualityComparer<ApplicationTable>.Default.Equals(selectedappvalue, targetItem))
        {
            selectedappvalue = targetItem;
            // 触发ValueChanged执行后续逻辑
            await OnValueChanged(selectedappvalue);
            // 同步组件显示文本，确保和Value一致
            autocompleteref.SetText(ToStringFunc(targetItem));
        }
    }
    else
    {
        // 无匹配项时，处理用户自定义输入（示例：创建新实例）
        selectedappvalue = new ApplicationTable { ApplicationName = currentText };
        await OnValueChanged(selectedappvalue);
    }
}

// 原有的ValueChanged处理方法
private Task OnValueChanged(ApplicationTable value)
{
    selectedappvalue = value;
    // 在这里执行你的条件判断和业务逻辑，比如显示提示信息
    return Task.CompletedTask;
}

// 原有的搜索方法
private Task<IEnumerable<ApplicationTable>> SearchAutoComplete(string text)
{
    // 保留你原有的搜索逻辑，返回匹配的列表项
    var filteredData = YourApplicationDataSource.Where(item => 
        item.ApplicationName.Contains(text, StringComparison.OrdinalIgnoreCase));
    return Task.FromResult(filteredData.AsEnumerable());
}

关键说明 #

• OnBlur事件：确保输入框失去焦点时触发校验逻辑
• 复用SearchFunc：避免重复编写搜索匹配代码，保持逻辑一致性
• 精确匹配判断：通过StringComparison.OrdinalIgnoreCase处理大小写不敏感的场景，可根据需求调整匹配规则
• 同步显示文本：调用SetText确保组件显示的文本和更新后的Value一致
• 自定义输入处理：无匹配项时可根据业务需求创建新实例或保留原有逻辑

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