MudChipField SearchText value is not updating or reflecting correctly in the UI

Question

I'm working with a MudChipField in Blazor. I have implemented a method ClearChipAsync that should clear the SearchText and the Values in the MudChipField. However, while the SearchText value is set to an empty string in the method, it does not visually clear in the UI.

<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);           
 }
}

Additional Information:

• The Values collection and chips are cleared correctly.
• The main issue is the search text value is not cleared.
• The method SearchValueChanged.InvokeAsync(SearchText) is called to update the MudChipField.

What I've Tried:

• Confirmed that SearchText is indeed set to an empty string.
• Verified that StateHasChanged is called after setting the SearchText.

Does anyone have an idea why the SearchText is not clearing visually and how to resolve this issue?

Answer 1

You could try use "@ref" to clear the bind directly:

<MudChipField @ref="field1" ...

@code{
    private MudChipField<string> field1;

    private async Task ClearChipAsync()
    {
        field1.Values.Clear();
...