External link in nz-menu appears as selected after click

[amiram]

Reproduction link

https://stackblitz.com/edit/ng-zorro-antd-ivy-ej9z21

Steps to reproduce

Create nz-menu with nz-menu-item that point to an external link in a new tab. When the link is clicked the menu item is selected and always stays like that.

What is expected?

The menu item should look like not selected and not active

What is actually happening?

The menu item looks selected

Environment	Info
ng-zorro-antd	10.0.1
Browser	Chrome

[celluj34]

I am having this problem too, even when manually setting nzSelected to false always.

[shahin4u000]

same here. any soution for that?

[timonmasberg]

same here, any workaround?

[ParsaArvanehPA]

Hi @timonmasberg A simple workaround is to use nzMatchRouter on the external link's parent; like this:

<li nz-menu-item nzMatchRouter>
  <a href="https://ng.ant.design" target="_blank" rel="noopener noreferrer">Navigation Four - Link</a>
</li>

Since the URL is not changed on the current page and a new page is opened instead, the "ant-menu-submenu-selected" class name is not applied to the link item.

As for the notion that this is a bug, I think this behavior is as intended. As you can see in the Antd menu document, in the "top navigation" section, the fourth list item is a link, and upon clicking the same behavior is applied.

[timonmasberg]

Hi @timonmasberg A simple workaround is to use nzMatchRouter on the external link's parent; like this:

<li nz-menu-item nzMatchRouter>
  <a href="https://ng.ant.design" target="_blank" rel="noopener noreferrer">Navigation Four - Link</a>
</li>

Since the URL is not changed on the current page and a new page is opened instead, the "ant-menu-submenu-selected" class name is not applied to the link item.

As for the notion that this is a bug, I think this behavior is as intended. As you can see in the Antd menu document, in the 'top navigation' section, the fourth list item is a link, and upon clicking the same behavior is applied.

thanks! that's a better approach than what I do currently (removing the ant-menu-item-selected class after click)

[ParsaArvanehPA]

Hi @timonmasberg A simple workaround is to use nzMatchRouter on the external link's parent; like this:

<li nz-menu-item nzMatchRouter>
  <a href="https://ng.ant.design" target="_blank" rel="noopener noreferrer">Navigation Four - Link</a>
</li>

Since the URL is not changed on the current page and a new page is opened instead, the "ant-menu-submenu-selected" class name is not applied to the link item. As for the notion that this is a bug, I think this behavior is as intended. As you can see in the Antd menu document, in the 'top navigation' section, the fourth list item is a link, and upon clicking the same behavior is applied.

thanks! that's a better approach than what I do currently (removing the ant-menu-item-selected class after click)

Happy to help :)