<div id="MTIChipSearchField">id="ChipSearchField">
<MudChipField T="string" Class="mud-chip-search"
Values="@Values" ValuesChanged="@((value) => ChipValuesChangedAsync(value))"
Values="@Values"Value="@SearchText" ValuesChanged="@((value)ValueChanged="@SearchValueChangeAsync" =>Placeholder="Search" ChipValuesChangedAsync(value))"Variant="Variant.Outlined"
Value="@SearchText"ChipSize="Size.Medium" ValueChanged="@SearchValueChangeAsync"WrapChips="true"
Placeholder="@Localizer["Search"]"Delimiter="@Delimiter" Variant="VariantChipColor="Color.Outlined"Default" ChipVariant="Variant.Text" Closeable="true">
</MudChipField>
@if (Values.Count > 0)
{
<div class="clear-chip">
<MudTooltip Text="ClearAll">
ChipSize="Size.Medium" WrapChips="true" <MudIconButton Icon="@Icons.Material.Outlined.Clear" OnClick="ClearChipAsync"></MudIconButton>
</MudTooltip>
</div>
}
</div>
@code {
/// <summary>
Delimiter="@Delimiter"///List ChipColor="ColorValues of the chip control.Default"
/// </summary>
[Parameter]
public List<string> Values { get; set; } = new List<string>();
/// <summary>
///Input string for search ChipVariant="Variantfiltering.Text"
Closeable="true"/// </summary>
[Parameter]
public string SearchText { get; set; } = string.Empty;
/// <summary>
/// Callback for the OnBlur="HandleBlurAsync">
Search ValueChanged event.
/// </MudChipField>summary>
[Parameter]
public EventCallback<string> SearchValueChanged @if{ (Valuesget; set; }
/// <summary>
/// Callback for the chip list ValuesChanged event.Count
>/// 0)</summary>
[Parameter]
public EventCallback<List<string>> ChipValuesChanged { get; set; }
/// <summary>
/// Should the text field <divbe class="clear-chip">set to focus on render?
/// </summary>
[Parameter]
public bool AutoFocus { get; set; } = <MudTooltipfalse;
Text="Clear/// All"><summary>
/// Delimiter with a default value of space
/// </summary>
public char Delimiter <MudIconButton= Icon="@Icons.Material.Outlined.Clear"' OnClick="@ClearChipAsync"></MudIconButton>';
/// <summary>
/// Event when the clear button is clicked.
/// </MudTooltip>summary>
private EventCallback<MouseEventArgs> ClearChipValues { get; set; }
</div>// <summary>
/// Event when }the chip list changes.
/// </div>summary>
/// <param name="values">list value from the chipset.</param>
/// <return>Task</return>
private async Task ClearChipAsyncChipValuesChangedAsync(List<string> values)
{
_isClearing Values = true;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>
_isClearing/// Search input value changed.
/// </summary>
/// <param name="value">Search Text Value.</param>
/// <return>Task</return>
private async Task SearchValueChangeAsync(string value)
{
SearchText = false;value;
StateHasChanged await SearchValueChanged.InvokeAsync(SearchText);
}
}
- 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.