Open Closed

Menu item that has already been selected cannot be selected again #4397


User avatar
0
ageiter created
  • ABP Framework version: v7.0.1
  • UI type: Blazor Server
  • DB provider: EF Core
  • Tiered (MVC) or Identity Server Separated (Angular): no

We have a situation where we want to click again on an already selected menu item to reload that view. But nothing happens when we click on it. In our case this is necessary because we have a grid with orders in this view. If we select an order, the report of this order opens. Afterwards, we want to get back to the order overview and usually do this by clicking on the menu button (which is still selected, though).

Also in the admin area this does not work, there you have to use the "Back" button.

In version 5.3.1 this had worked (Lepton Theme, not LeptonX).

Do you have a solution to this?

Regards, Adrian


10 Answer(s)
  • User Avatar
    1
    enisn created
    Support Team .NET Developer

    This doesn't seem related to ABP. It's natural behavior of Blazor https://github.com/dotnet/aspnetcore/issues/41922

  • User Avatar
    0
    ageiter created

    So why did this work before? And is there a way to force a reload (when clicking on the menu button)?

  • User Avatar
    0
    ageiter created

    Ok, I need to clarify my scenario a bit, because it is quite obviously a bug in LeptonX.

    When I open an order report in the orders list, we use NavigationManager.NavigateTo() to go to the report page. So it is not the same page (but for the reporting page, there is intentionally no menu item). Now when you click on orders again in the menu, nothing happens at all.

    Important: We have now changed the theme to "TopMenu" and there it works exactly as it should!

  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer

    Hi,

    Can you create a new project to reproduce it and share with me? I will check it. thanks. shiwei.liang@volosoft.com

  • User Avatar
    0
    ageiter created

    Hi liangshiwei,

    It's simple: use your default project template for Blazor. Open the page Administration -> Text Templates

    If you now edit a text template, a new page will open. In the side menu "Text Templates" remains active and you can only return to the overview with the button "Return To Templates". But not via the menu.

    If you choose the layout with the TopMenu, however, this is possible exactly as we would like. You click on "Text Templates" in the menu again and get to the overview.

    There is also a small unwanted side effect with the TopMenu. If you are on an overview page (e.g. "Users") and click on "Users" in the menu again, the breadcrumbs and the buttons at the top disappear. But that's another story...

  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer

    Hi,

    You can try this:

    MyMainMenuItem.razor

    @inject NavigationManager Navigation
    
    @using Volo.Abp.DependencyInjection
    @using Volo.Abp.AspNetCore.Components.Web.LeptonXTheme.Components.ApplicationLayout.SideMenu.Navigation
    @inherits MainMenuItem
    @attribute [ExposeServices(typeof(MainMenuItem))]
    
    @{
    	var cssClass = string.IsNullOrEmpty(MenuItem.MenuItem.CssClass) ? string.Empty : MenuItem.MenuItem.CssClass;
    }
    
    @if (MenuItem.MenuItem.IsLeaf)
    {
    	var currentUri = new Uri(Navigation.Uri);
    
    	var url = MenuItem.MenuItem.Url == null  ? "#" : MenuItem.MenuItem.Url.TrimStart('/', '~');
    
    	<a href="@url" target="@MenuItem.MenuItem.Target" class="lpx-menu-item-link lpx-menu-item @(MenuItem.IsActive ? "selected" : "") @cssClass" id="@MenuItem.MenuItem.ElementId">
    		@if (!MenuItem.MenuItem.Icon.IsNullOrEmpty() || MenuItem.Parent is null)
    		{
    			<span class="lpx-menu-item-icon"><i class="lpx-icon @MenuItem.MenuItem.Icon" aria-hidden="true"></i></span>
    		}
    
    		<span class="lpx-menu-item-text hidden-in-hover-trigger">@MenuItem.MenuItem.DisplayName</span>
    	</a>
    }
    else
    {
    	<a @onclick:preventDefault @onclick="ToggleMenu" class="lpx-menu-item-link lpx-menu-item @(MenuItem.IsActive || MenuItem.IsOpen ? "selected" : "")">
    
    		@if (!MenuItem.MenuItem.Icon.IsNullOrEmpty() || MenuItem.Parent is null)
    		{
    			<span class="lpx-menu-item-icon"><i class="lpx-icon @MenuItem.MenuItem.Icon" aria-hidden="true"></i></span>
    		}
    
    		<span class="lpx-menu-item-text hidden-in-hover-trigger">@MenuItem.MenuItem.DisplayName</span>
    
    		<i class="dd-icon hidden-in-hover-trigger caret bi-chevron-@(MenuItem.IsOpen ? "up" : "down")" aria-hidden="true"></i>
    	</a>
    
    	<ul id="@MenuItem.MenuItem.ElementId" class="lpx-inner-menu hidden-in-hover-trigger @(MenuItem.IsOpen ? "" : "collapsed") @cssClass">
    		@foreach (var childMenuItem in MenuItem.Items)
    		{
    			<li class="lpx-inner-menu-item">
    				<MainMenuItem Menu="@Menu" MenuItem="@childMenuItem" />
    			</li>
    		}
    	</ul>
    }
    

    the breadcrumbs and the buttons at the top disappear. But that's another story...

    I will check it.

  • User Avatar
    0
    ageiter created

    Hi @liangshiwei, thanks for the help with the menu. Your code works. Will you do the same for the official version?

    the breadcrumbs and the buttons at the top disappear. But that's another story... I will check it.

    Have you found out anything about this yet?

  • User Avatar
    1
    liangshiwei created
    Support Team Fullstack Developer

    Hi,

    Will you do the same for the official version?

    Yes it will

    Have you found out anything about this yet?

    Still not, I will keep look

  • User Avatar
    0
    ageiter created

    Please do not close before giving an answer to the open question.

  • User Avatar
    0
    liangshiwei created
    Support Team Fullstack Developer

    Fixed: https://github.com/abpframework/abp/pull/15858

Made with ❤️ on ABP v9.1.0-preview. Updated on December 05, 2024, 12:19