Blazor中MudChipField的SearchText无法在UI中正确更新

在Blazor项目中使用MudChipField组件时，实现了ClearChipAsync方法用于清空SearchText和组件的Values集合。目前Values集合和芯片已被正确清空，但SearchText设为空字符串后，UI上的搜索文本并未被视觉清除。已尝试调用SearchValueChanged.InvokeAsync(SearchText)和StateHasChanged()，问题仍未解决。

代码示例 #

<div id="ChipSearchField">
    <MudChipField T="string" Class="mud-chip-search" Values="@Values" ValuesChanged="@((value) => ChipValuesChangedAsync(value))"
              Value="@SearchText" ValueChanged="@SearchValueChangeAsync" Placeholder="Search" Variant="Variant.Outlined"
                  ChipSize="Size.Medium" WrapChips="true" 
                  Delimiter="@Delimiter" ChipColor="Color.Default" ChipVariant="Variant.Text" Closeable="true">
</MudChipField>

@if (Values.Count > 0)
{
    <div class="clear-chip">
        <MudTooltip Text="ClearAll">
            <MudIconButton Icon="@Icons.Material.Outlined.Clear" OnClick="ClearChipAsync"></MudIconButton>
        </MudTooltip>
    </div>
}
</div>

@code {
    /// <summary>
    ///List Values of the chip control.
    /// </summary>
    [Parameter]
    public List<string> Values { get; set; } = new List<string>();

    /// <summary>
    ///Input string for search filtering.
    /// </summary>
    [Parameter]
    public string SearchText { get; set; } = string.Empty;

    /// <summary>
    /// Callback for the Search ValueChanged event.
    /// </summary>
    [Parameter]
    public EventCallback<string> SearchValueChanged { get; set; }

    /// <summary>
    /// Callback for the chip list ValuesChanged event.
    /// </summary>
    [Parameter]
    public EventCallback<List<string>> ChipValuesChanged { get; set; }

    /// <summary>
    /// Should the text field be set to focus on render?
    /// </summary>
    [Parameter]
    public bool AutoFocus { get; set; } = false;

    /// <summary>
    /// Delimiter with a default value of space
    /// </summary>       
    public char Delimiter = ' ';

    /// <summary>
    /// Event when the clear button is clicked.
    /// </summary>
    private EventCallback<MouseEventArgs> ClearChipValues { get; set; }

    /// <summary>
    /// Event when the chip list changes.
    /// </summary>
    /// <param name="values">list value from the chipset.</param>
    /// <return>Task</return>
    private async Task ChipValuesChangedAsync(List<string> values)
    {
        Values = values.Select(v => v.Trim()).Where(v => !string.IsNullOrWhiteSpace(v)).Distinct().ToList();

        await ChipValuesChanged.InvokeAsync(Values);
    }

    /// <summary>
    /// Clear chip values
    /// </summary>  
    /// <return>Task</return>
    private async Task ClearChipAsync()
    {
        SearchText = string.Empty;
        Values.Clear();
        
        await ChipValuesChanged.InvokeAsync(Values);
        await SearchValueChanged.InvokeAsync(SearchText);
        await ClearChipValues.InvokeAsync();

    }

    /// <summary>
    /// Search input value changed.
    /// </summary>  
    /// <param name="value">Search Text Value.</param>
    /// <return>Task</return>
    private async Task SearchValueChangeAsync(string value)
    {
        SearchText = value;

        await SearchValueChanged.InvokeAsync(SearchText);           
    }
}

补充信息 #

• Values集合和芯片已被正确清空
• 核心问题是搜索文本值未在视觉上清除
• 已调用SearchValueChanged.InvokeAsync(SearchText)尝试更新MudChipField

已尝试方案 #

• 确认SearchText确实被设为空字符串
• 在设置SearchText后调用StateHasChanged()

问题原因及解决方案 #

问题核心原因

1. Parameter属性直接修改无效：Blazor中，子组件的Parameter属性是单向绑定的，子组件直接修改SearchText和Values不会触发父组件的状态更新，导致UI无法同步。
2. 集合修改未触发变更检测：调用Values.Clear()只是修改了现有集合的内容，但集合的引用未变，Blazor的变更检测机制不会感知到这种变化，导致组件更新不彻底。

解决步骤

1. 修正ClearChipAsync方法，通过EventCallback通知父组件更新
   不要直接修改子组件的Parameter属性，而是通过定义好的EventCallback让父组件负责更新绑定值：

   private async Task ClearChipAsync()
   {
       // 通知父组件清空SearchText，由父组件更新后传递给子组件
       await SearchValueChanged.InvokeAsync(string.Empty);
       // 创建新的空列表，通知父组件更新Values（引用变化触发变更检测）
       await ChipValuesChanged.InvokeAsync(new List<string>());
       await ClearChipValues.InvokeAsync();
   }
   

2. 确保父组件正确绑定参数
   父组件需要正确绑定SearchText和Values，并在回调中更新自身状态：

   <!-- 父组件中的使用示例 -->
   <YourChipComponent 
       SearchText="@ParentSearchText" 
       SearchValueChanged="@(val => ParentSearchText = val)"
       Values="@ParentValues" 
       ChipValuesChanged="@(vals => ParentValues = vals)" />
   
   @code {
       private string ParentSearchText { get; set; } = string.Empty;
       private List<string> ParentValues { get; set; } = new List<string>();
   }
   

3. 可选：通过组件引用强制更新输入框
   如果上述方法仍未解决问题，可以给MudChipField添加引用，直接操作组件的Value属性：

   <!-- 在MudChipField上添加@ref -->
   <MudChipField @ref="_chipField" T="string" Class="mud-chip-search" ... />
   
   @code {
       private MudChipField<string> _chipField;
   
       private async Task ClearChipAsync()
       {
           await SearchValueChanged.InvokeAsync(string.Empty);
           await ChipValuesChanged.InvokeAsync(new List<string>());
           // 强制清空组件输入框的Value
           _chipField.Value = string.Empty;
           // 可选：聚焦输入框，增强用户体验
           await _chipField.FocusAsync();
       }
   }
   

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