Previously selected menu reappears after filtering and navigating to another page (LeptonX MudBlazor) #10926

1 Answer(s)

• 

  0

  AI-Bot created 5 hours ago

  Support Team ABP Agent

  • This behavior comes from how LeptonX’s side menu keeps the currently active/selected item visible/expanded (so the user can always see “where they are”), even if you apply a client-side filter that hides non-matching items.
  • In the LeptonX MudBlazor side-menu, the menu content re-renders on navigation and the component logic re-applies the “active menu item” state. As a result, the previously active item can be injected back into the rendered list even though it doesn’t match your filter—while the rest of the menu stays filtered.

  Fix (recommended): keep filtering and selection state in one place, and re-apply the filter after every navigation/change

  1. In your LeptonX side menu component where you keep the filter text, subscribe to NavigationManager.LocationChanged.
  2. Whenever navigation happens, re-apply the filter to the menu model/list after the menu state updates (call StateHasChanged).
  3. Ensure the filtered list is the only source used by the renderer (don’t render from the original full menu tree + “active item” separately).

  Minimal pattern (put into your custom menu component/code-behind; adapt names to your project):

  @inject NavigationManager NavigationManager
  
  @code {
      private string _filterText = string.Empty;
  
      protected override void OnInitialized()
      {
          NavigationManager.LocationChanged += OnLocationChanged;
      }
  
      private void OnLocationChanged(object? sender, Microsoft.AspNetCore.Components.Routing.LocationChangedEventArgs e)
      {
          // Re-apply filter after navigation so "active item" logic can't re-insert items
          ApplyFilter();
          InvokeAsync(StateHasChanged);
      }
  
      private void ApplyFilter()
      {
          // IMPORTANT:
          // Rebuild the rendered menu items *only* from your filter result.
          // Do not let rendering also pull in "active item" from the original full menu tree.
          //
          // Pseudocode:
          // FilteredMenu = FullMenu.FilterByDisplayName(_filterText);
      }
  
      public void Dispose()
      {
          NavigationManager.LocationChanged -= OnLocationChanged;
      }
  }
  

  Alternative behavior (if you want LeptonX’s “active item is always visible”):

  • Treat this as intended UX and change your expectation: LeptonX will always reveal the active item even if it doesn’t match the filter. In that case, consider clearing the filter automatically on navigation.

  Links:

  • https://abp.io/docs/10.7/ui-themes/lepton-x/blazor?UI=Blazor&BlazorUI=MudBlazor
  • https://abp.io/docs/10.7/framework/ui/blazor/navigation-menu

  ---

  This response was generated by AI. If it didn’t solve your problem, feel free to post a new answer — our support team will jump in to help you soon.

  Markdown supported.

  Copy, paste, or drag & drop images and files (max 100 MB per file, 100 MB total per post)

  Save Cancel