Blazor WASM - StateHasChanged() Not Updating UI

Question

I'm using Blazor WASM on .NET6. I'm trying to filter names of links on a mega menu.

I have my reactive filter which is a html input, and based on the text entered in the input, if any text is matching a link name, the matching part of the link name is highlighted in red. It is working properly, except that it requires a mouse click (anywhere) or hitting the enter key after the text is entered in the filter to update the UI with the highlighted text. I tried raising the "onkeypress" event on the input, that calls the "RefreshUI" method that invokes StateHasChanged() asyncronously (I will provide a small sample below).

I put the classes in the razor file so that you can see a working sample (I do put them in separate class files). GetMenuData() was altered here to provide a smaller, bogus set of data. The real one just consumes JSON from a web api and converts it into the object.

I verified that the event gets raised and StateHasChanged() is called, but I'm not understanding why the DOM is not updating. Any help would be greatly appreciated.

@page "/counter"
@using System.Text.RegularExpressions

Counter


  
    
        
    
  
  
    Business Metrics
    
        
            @if (menuItems != null)
            {
                foreach (SubMenu sm in menuItems.Where(x => x.MenuText == "Business Metrics").Select(x => x.Submenus).FirstOrDefault())
                {
                    
                        
                            @sm.SubmenuText
                            @foreach (IntranetMenuData imd in sm.SubmenuLinks)
                            {
                                @((MarkupString)FilterMenu(imd.LinkTitle))
                            }
                        
                    
                }
            }
        
    
  


@code {
  private string filterTerm;
  private List menuItems;

  protected override void OnInitialized()
  {
    GetMenuData();
    base.OnInitialized();
  }

  private string FilterMenu(string link)
  {
    if (!string.IsNullOrWhiteSpace(link) && !string.IsNullOrWhiteSpace(filterTerm))
    {
        Match matchedText = Regex.Match(link, @"(?i:" + filterTerm + @")");
        if (matchedText.Success)
        {
            return link.Replace(matchedText.Value, "" + matchedText.Value + "", StringComparison.InvariantCultureIgnoreCase);
        }
        else
        {
            return link;
        }
    }
    else
    {
        return link;
    }
  }

  private void GetMenuData()
  {
    IntranetMenuData imd1 = new IntranetMenuData();
    IntranetMenuData imd2 = new IntranetMenuData();
    List mItems = new List();
    SubMenu sub1 = new SubMenu();
    List subMenus = new List();
    TopMenuHeading tmh = new TopMenuHeading();
    List topMenuHeadings = new List();

    imd1.LinkTitle = "Capacity Utilization";
    imd2.LinkTitle = "Relieved Hours";
    mItems.Add(imd1);
    mItems.Add(imd2);

    sub1.SubmenuText = "Capacity";
    sub1.SubmenuLinks = mItems;
    subMenus.Add(sub1);

    tmh.MenuText = "Business Metrics";
    tmh.Submenus = subMenus;
    topMenuHeadings.Add(tmh);

    menuItems = topMenuHeadings;
  }

  private async Task RefreshUI()
  {
    await InvokeAsync(() => StateHasChanged());
  }

  public class IntranetBookmarks
  {
    public long EmployeeNumber { get; set; }
    public string Submenu { get; set; }
    public string Text { get; set; }
    public string Url { get;set; }
  }

  public class IntranetMenuData
  {
    public long LinkMenuId { get; set; }
    public string LinkOnClick { get; set; }
    public string LinkTitle { get; set; }
    public string LinkUrl { get; set; }
  }

  public class SubMenu
  {
    public List SubmenuLinks { get; set; }
    public string SubmenuText { get; set; }

    public SubMenu()
    {
        SubmenuLinks = new List();
    }
  }

  public class TopMenuHeading
  {
    public string MenuText { get; set; }
    public List Submenus { get; set; }

    public TopMenuHeading()
    {
        Submenus = new List();
    }
  }
}

user_2936204 · Answer

Your keypress is not triggering a 'Bind'. It just asks the DOM to refresh, but your filterTerm value will not have changed.

The default binding happens with the 'onchange' event. This happens when you press enter or the input loses focus.

You want binding for the 'oninput' event, which will occur every time the content of the input changes:

As this causes an oninput event to be triggered, and the Blazor engine automatically triggers a DOM refresh after a UI event is handled, you should be able to remove your onkeypress handler as a force refresh is not required.

user_9454556 · Answer

I use @bind-value so everytime you set a valkue in result the input value changes




private string result {get;set;}

void filter(){
 //Do something and set result=output
}

Blazor WASM - StateHasChanged() Not Updating UI

2 Answers