Quantcast
Channel: Active questions tagged blazor - Stack Overflow
Viewing all articles
Browse latest Browse all 4839

OnBlur Event Method Doesnot Clear the SearchValue in MudChipField

$
0
0

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


Viewing all articles
Browse latest Browse all 4839

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>