When a phrase has been entered but the enter key has not been pressed, the search needs to be initiated if the search textbox loses focus. To address this, I have implemented the HandleBlurAsync method. While I am able to add the chip values, the current SearchText is not being cleared visually in UI after adding it to the chip set.
<MudChipField T="string" Values="@Values" ValuesChanged="@((value) => ChipValuesChangedAsync(value))" Value="@SearchText" ValueChanged="@((value) => SearchValueChangeAsync(value))" StyleChip="@(_disableRadius ? "border-radius: 0 !important" : null)" Delimiter="@_delimiter" FullWidth="true" Disabled="_disabled" ReadOnly="_readonly" ChipColor="_color" ChipVariant="_chipVariant" ChipSize="_chipSize" WrapChips="_wrapChips" MaxChips="_maxChips" ChipsMaxWidth="_chipsMaxWidth" Closeable="_closeable" Variant="_variant" Label="ChipField" OnBlur="@(async (value) =>await HandleBlurAsync(value))" />@code { string _delimiter = "Enter"; int _maxChips = 0; int _chipsMaxWidth = 80; Color _color = Color.Default; Variant _chipVariant = Variant.Filled; Variant _variant = Variant.Outlined; Size _chipSize = Size.Medium; bool _wrapChips = true; bool _disabled = false; bool _readonly = false; bool _disableRadius = false; bool _closeable = true; /// <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; } protected override async Task OnInitializedAsync() { await base.OnInitializedAsync(); } private async Task SearchValueChangeAsync(string value) { SearchText = value; await SearchValueChanged.InvokeAsync(SearchText); } /// <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>/// Handles the blur event of the search field./// </summary>/// <return>Task</return> private async Task HandleBlurAsync(FocusEventArgs e) { await Task.Delay(500); if (!string.IsNullOrWhiteSpace(SearchText)) { Values.Add(SearchText); await ChipValuesChangedAsync(Values); SearchText = string.Empty; await SearchValueChangeAsync(SearchText); } StateHasChanged(); }}Additional Info
Installed CodeBeam.MudBlazor.Extensions version 7.0.0