skip to Main Content

I have a child component for filtering a search (DropdownFilter) which takes an input of a list of suggestions and a function to update that list.

For some reason DropdownFilter.Suggestions isn’t being updated after it is initially set and I don’t know how to update it again. Any information about how to update the property after it is initially bound would be great!

DropdownFilter.razor:

<input id="search" @onfocus="SearchFocused" @onblur="SearchUnfocused" @oninput="UpdateSearchText" />
@foreach (var suggestion in Suggestions)
{
    <p>@suggestion</p>
}

@code {
    [Parameter]
    public Action<string> SearchFieldChanged { get; set; }

    //[Parameter]
    //public RenderFragment<TSuggestion> SuggestionTemplate { get; set; }
    [Parameter]
    public List<string> Suggestions { get; set; }

    private bool searchFocus = false;
    private void SearchFocused(FocusEventArgs args) {
        searchFocus = true;
        //UpdateSearchText();
    }
    private void SearchUnfocused(FocusEventArgs args) => searchFocus = false;

    private void UpdateSearchText(ChangeEventArgs args)
    {
        SearchFieldChanged.Invoke((string)args.Value);
    }

    public void Refresh() {
        StateHasChanged();
    }
}

Index.razor:

@page "/example"

<div class="container-fluid dropdown-holder">
    <DropdownFilter @ref="dropdown" Suggestions="@maskResults" SearchFieldChanged="UpdateSearchResults" />
</div>

@code {
    DropdownFilter dropdown;

    public class MaskResult {
        public string name;
    }

    static readonly string[] allMasks = {
            "Electric",
            "Water",
            "Ground",
            "Fire",
            "Bug"
        };

    public List<string> maskResults = allMasks.ToList();

    private void UpdateSearchResults(string search)
    {
        search = search.ToLower();

        maskResults = allMasks.Where((mask) =>
        {
            return mask.ToLower().StartsWith(search);
        }).ToList();

        dropdown.Refresh();
    }
}

2

Answers


  1. I think that you are trying to create a Datalist, please check this answer:"
    datalist How to bind selected item to object

    Login or Signup to reply.
  2. If you add a StateHasChanged() call just here it should work:

    private void UpdateSearchResults(string search)
    {
        search = search.ToLower();
    
        maskResults = allMasks.Where((mask) =>
        {
            return mask.ToLower().StartsWith(search);
        }).ToList();
    
        StateHasChanged();  // Add this line
        dropdown.Refresh();
    }
    

    As I understand, if you update manually a Parameter of a component, there are some cases where Blazor does not get automatically the info that it needs to update its components. So if you call StateHasChanged, it will reevaluate all Parameters of the childreen of the component where you do the call.

    I’ll let someone correct me if I am wrong.

    Thanks and good luck 🙂

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search