In MudAutoComplete Component, When the search results are more than 10, A button should display to add more items to the list

Question

I am using MudAutoComplete component and Using MoreItemsTemplate to increment the count of MaxItems in the MudAutoComplete list. Here the count is increasing while hitting that buttton but UI with updated ItemCount is not rendering. My question is how to render UI upon change of item count?

I tried using StateHasChanged(); method to render the UI but it didn't work. I expect to render UI upon clicking on Add more items button which is in MoreItemsTemplate.

Here is the code:

<MudGrid>
    <MudItem xs="12" sm="6" md="4">
        <MudAutocomplete T="string" Label="US States" 
            @bind-Value="value1" 
            SearchFunc="@Search1"
            MaxItems = "@maxItems">
        <MoreItemsTemplate>
           <MudButton Color="Color.Primary" OnClick=AddItemCount>Add 10 more items </MudButton>
        </MoreItemsTemplate>
        </MudAutocomplete>
    </MudItem>
</MudGrid>

@code {
    private string value1;
    private int maxItems = 10;
    private string[] states =
    {
        "Alabama", "Alaska", "American Samoa", "Arizona",
        "Arkansas", "California", "Colorado", "Connecticut",
        "Delaware", "District of Columbia", "Federated States of Micronesia",
        "Florida", "Georgia", "Guam", "Hawaii", "Idaho",
        "Illinois", "Indiana", "Iowa", "Kansas", "Kentucky",
        "Louisiana", "Maine", "Marshall Islands", "Maryland",
        "Massachusetts", "Michigan", "Minnesota", "Mississippi",
        "Missouri", "Montana", "Nebraska", "Nevada",
        "New Hampshire", "New Jersey", "New Mexico", "New York",
        "North Carolina", "North Dakota", "Northern Mariana Islands", "Ohio",
        "Oklahoma", "Oregon", "Palau", "Pennsylvania", "Puerto Rico",
        "Rhode Island", "South Carolina", "South Dakota", "Tennessee",
        "Texas", "Utah", "Vermont", "Virgin Island", "Virginia",
        "Washington", "West Virginia", "Wisconsin", "Wyoming",
    };
 private async Task AddItemCount()
 {
     maxItems += 10;
 }
    private async Task<IEnumerable<string>> Search1(string value)
    {
        // In real life use an asynchronous function for fetching data from an api.
        await Task.Delay(5);

        // if text is null or empty, show complete list
        if (string.IsNullOrEmpty(value))
            return states;
        return states.Where(x => x.Contains(value, StringComparison.InvariantCultureIgnoreCase));
    }
}

Please run the above code here here

When I click on add 10 more items, AutoMudComplete should render 10 more items instantly I the dropdown.

Answer 1

The MudAutoComplete component uses a Popover menu in order to show the list of results. The issue you're having is calling StateHasChanged does not refresh the menu. You also can't call StateHasChanged directly on the Popover as no reference to it exists.

What you can do however, as a workaround, is toggle the Popover menu.
By closing and opening the menu, the search is executed again and your updated MaxItems will be used.

Update your AddItemCount method to

    private async Task AddItemCount()
    {
        maxItems += 10;       
    
        //refresh items list
        await autocompleteReference.ToggleMenu(); //close menu
        await autocompleteReference.ToggleMenu(); //reopen menu
        
        //scroll to last location
        await autocompleteReference.ScrollToListItem(Math.Min(maxItems - 11, states.Length - 1));
    }

You can see a full example here.

Note: In the executable example, there is no real delay in the search method, so the menu toggle is pretty instantaneous. However, if your search does take some time to complete, when the menu is reopened, you will notice the delay in populating the new data before the list re-appears. You could use a ProgressIndicatorInPopoverTemplate for a better UX. Example here