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

ageiter created 2 years ago

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

Go to accepted answer

10 Answer(s)

1

enisn created 2 years ago
Support Team .NET Developer

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

ageiter created 2 years ago

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

ageiter created 2 years ago

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!
0

liangshiwei created one year ago
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
0

ageiter created one year ago

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...

liangshiwei created one year ago

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.

0

ageiter created one year ago

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?
1

liangshiwei created one year ago
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
0

ageiter created one year ago

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

liangshiwei created one year ago
Support Team Fullstack Developer

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

Have an answer to this question? Log in and write your answer.