The text is getting cleared in MudBlazor Autocomplete component

Question

The text is getting cleared in MudBlazor Autocomplete component

Buddhi - BLUE LOTUS 360 1

I am working on the Blazor web assembly project which is running on .net7 and using MudBlazor (version-6.0.10) as the UI framework. so I have created a custom autocomplete component in MudBlazor.
then my issue is the text that I type on this autocomplete is getting cleared automatically while searching/typing
following you can see that razor component.

<MudAutocomplete T="ItemResponse"
                     Label="AutoComplete" 
                     SearchFunc="@OnComboSearch"  
                     Value="selecteditemResponse"
                     ValueChanged="OnComboValueChanged"
                     ResetValueOnEmptyText="true" DebounceInterval="700"/>
                    

@code{

    private ItemResponse selecteditemResponse = new ItemResponse();
    IList<ItemResponse> ItemRes = new List<ItemResponse>();
    private bool IsServerFiltering =true;
  
    protected override async Task OnInitializedAsync()
    {   
        await ReadAutoCompleteData();
       
        await base.OnInitializedAsync();
    }


   protected override Task OnParametersSetAsync(){}


   private async Task<IEnumerable<ItemResponse>> OnComboSearch(string value)
    {
        if (string.IsNullOrEmpty(value))
        {
            selecteditemResponse = new ItemResponse();
            return ItemRes;
        }
        
        if (IsServerFiltering)
        {
            await ReadAutoCompleteData(value);
        }
        return ItemRes.Where(x => x.ItemName!=null && x.ItemName.Contains(value, StringComparison.InvariantCultureIgnoreCase));
    }


public async Task ReadAutoCompleteData(string SearchQuery="")
    {
        ComboRequestDTO requestDTO = new ComboRequestDTO();
        requestDTO.SearchQuery = SearchQuery;
   
        ItemRes = await _comboManager.GetItemResponses(requestDTO);//api call

        /*here i am getting the data for this autocomplete through an api call and assign it to a ItemRes list
        (normally we are getting more than 3000 items for this combo if SearchQuery string is null or empty 
        otherwise only 10 records are coming)*/
    }


private async Task OnComboValueChanged(ItemResponse itemResponse)
    {
       //
    }

}

0 comments

2 answers

Your answer

Answer 1

My solution is trying to add the user input (if not found in the dropdown) to the result of the OnComboSearch(string value). User then can select his/her own input from the dropdown.

The following is my own search function

private async Task<IEnumerable<DropdownOption>> Search(string searchText, CancellationToken token)
{
    // use an asynchronous function for fetching data from an api.
    HashSet<DropdownOption> _found = new();
    await Task.Delay(1, token);
    // if searchText is null or empty, show complete list
    if (string.IsNullOrEmpty(searchText))
    {
        _found = _dropdownList;
    }
    // otherwise, filtered list
    _found = _dropdownList.Where(x => x.Text.Contains(searchText, StringComparison.InvariantCultureIgnoreCase) ).ToHashSet();

    Console.WriteLine($"Found: {_found.Count()}");

    if (_found.Count() == 0)
    {   // add user's own input as a new dropdownOption
        _found.Add(new DropdownOption { Text = searchText, Value = searchText });
    }
    return _found;
}

Answer 2

Hi Buddhi - BLUE LOTUS 360,

It may be that the debounce interval is too short, and what would happen is that the value is reset when the search function is activated. Have you tried increasing the value to DebounceInterval="1000" or more?

<MudAutocomplete T="ItemResponse"
                 Label="AutoComplete" 
                 SearchFunc="@OnComboSearch"  
                 Value="selecteditemResponse"
                 ValueChanged="OnComboValueChanged"
                 ResetValueOnEmptyText="true"
                 DebounceInterval="1000" />

Regards,

Share via

The text is getting cleared in MudBlazor Autocomplete component

2 answers

Your answer