Skip to main content
added 1639 characters in body
Source Link
Aishh
  • 11
  • 2
 
<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.
<div id="MTIChipSearchField">
    <MudChipField T="string" Class="mud-chip-search" 
                  Values="@Values" ValuesChanged="@((value) => ChipValuesChangedAsync(value))"
                  Value="@SearchText" ValueChanged="@SearchValueChangeAsync" 
                  Placeholder="@Localizer["Search"]" Variant="Variant.Outlined"
                  ChipSize="Size.Medium" WrapChips="true" 
                  Delimiter="@Delimiter" ChipColor="Color.Default" 
                  ChipVariant="Variant.Text" Closeable="true" 
                  OnBlur="HandleBlurAsync">
    </MudChipField>

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

private async Task ClearChipAsync()
{
    _isClearing = true;

    SearchText = string.Empty;
    Values.Clear();
    
    await ChipValuesChanged.InvokeAsync(Values);
    await SearchValueChanged.InvokeAsync(SearchText);
    await ClearChipValues.InvokeAsync();

    _isClearing = false;
    StateHasChanged();
}
  • The Values collection and chips are cleared correctly.
  • The method SearchValueChanged.InvokeAsync(SearchText) is called to update the MudChipField.
 
<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);           
 }
}
  • 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.
edited tags
Link
Qiang Fu
  • 5.7k
  • 1
  • 4
  • 15
Source Link
Aishh
  • 11
  • 2

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

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="MTIChipSearchField">
    <MudChipField T="string" Class="mud-chip-search" 
                  Values="@Values" ValuesChanged="@((value) => ChipValuesChangedAsync(value))"
                  Value="@SearchText" ValueChanged="@SearchValueChangeAsync" 
                  Placeholder="@Localizer["Search"]" Variant="Variant.Outlined"
                  ChipSize="Size.Medium" WrapChips="true" 
                  Delimiter="@Delimiter" ChipColor="Color.Default" 
                  ChipVariant="Variant.Text" Closeable="true" 
                  OnBlur="HandleBlurAsync">
    </MudChipField>

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

private async Task ClearChipAsync()
{
    _isClearing = true;

    SearchText = string.Empty;
    Values.Clear();
    
    await ChipValuesChanged.InvokeAsync(Values);
    await SearchValueChanged.InvokeAsync(SearchText);
    await ClearChipValues.InvokeAsync();

    _isClearing = false;
    StateHasChanged();
}

Additional Information:

  • The Values collection and chips are cleared correctly.
  • 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?