ContextMenu - does NOT remove from the DOM after router.navigate action

[eXpertise7]

Describe the bug

After routing to another page on clicking on one (command property) ContextMenu item - it does NOT work properly to me. ContextMenu is not removed from the DOM after we route to another page in the Angular app.

First video (I set display: block !important to disable PrimeNG display: none bug), router navigate on command property does not work:

Video: https://github.com/primefaces/community/assets/17203747/2e972334-ebb7-4340-bf53-1e37e8b996b3

Second video (I do not override any PrimeNG CSS, issue with display: none CSS by PrimeNG 16 can be seen here), I'm clicking right mouse button to open up context menu:

2023-10-02.10-00-02.mp4

The only change what I've done (temporarily on PrimeNG 16 because of a bug) in the video to original ContextMenu CSS is that I set manually display: block !important; because contextMenu has display: none set by default on .p-contextmenu CSS class even when user clicks on the contextMenu. So originally, we can NOT see ContextMenu because PrimeNG hides it with display: none.

So there are two bugs:

• display property of .p-contextmenu CSS class works wrong
• contextMenu does not work properly after route to another page (on command property in the [model] array of contextMenu)

This has always worked in versions up to PrimeNG 15. Now on PrimeNG 16 I think that bug has been introduced. I did not change any code of PrimeNG in meantime.

Stackblitz: https://stackblitz.com/edit/5lxh8n?file=src%2Fapp%2Fdemo%2Fcontext-menu-basic-demo.html,src%2Fapp%2Fdemo%2Fcontext-menu-basic-demo.ts

There's an obvious bug with p-contextMenu not being removed from the DOM, when user right clicks (and routes to other page - command property) on any row of the p-table .

State of p-contextMenu after command action (route activation), p-contextMenu shouldn't be in the DOM:

I'm available for more demonstration or explanation. I am also available for checking PrimeNG codebase to see where issue was introduced.

Kind regards,
Robert Medved

--
Issue is persistent on: PrimeNG - version 16.5.0, browser cache has been cleared by me after updating new version.

I'm available for more demonstration or explanation.

Environment

Windows + Chrome

Reproducer

https://stackblitz.com/edit/5lxh8n?file=src%2Fapp%2Fdemo%2Fcontext-menu-basic-demo.html,src%2Fapp%2Fdemo%2Fcontext-menu-basic-demo.ts

Angular version

16.2.0

PrimeNG version

16.5.0

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

18.18.0

Browser(s)

No response

Steps to reproduce the behavior

1. Open Video and watch all OR open Stackblitz
2. Right click on the any row of the p-table
3. Click on the p-contextMenu command action (route to another page)
4. See that p-contextMenu is still in the DOM - component is not being destroyed after command action

Expected behavior

p-contextMenu should be destroyed from the DOM after user does command action=clicks on p-contextMenu item (routes to another page).

[eXpertise7]

Link to Discussion thread where lead PrimeNG Angular developer has confirmed the bug: https://github.com/orgs/primefaces/discussions/161

[hugograf]

I am pretty sure that the context menu with appendTo="body" is no longer closed since version 16.1.0. Up to and with version 16.0.2 it still works, more about this in #13936.

[eXpertise7]

@cetincakiroglu, [email protected] update: I can confirm that when I open p-contextMenu with right click in the p-table, and when I try to navigate to other page - p-contextMenu is being removed from the DOM when route action happens, but - an application breaks on page I try to route.

Console error:

Debugger stack trace:

The problem is here:

if (this.appendTo) {
            if (this.appendTo === 'body') this.renderer.removeChild(this.document.body, this.containerViewChild.nativeElement);

It's an error on your side guys.

IMPORTANT: I also do not understand why p-contextMenu has display: none; style set when I right click to trigger the component. It can't be displayed that way in the user interface. So, I have to put display: block !important; at my codebase to show it, and then the issue above occurs.

Take me seriously please, I'm using PrimeNG for 6 years already without any issues and single bug.

Thanks in advance,
Robert Medved

[hugograf]

Issue #14006 and pull request #14102 address the same error.

[cetincakiroglu]

Hi,

Thanks a lot for reporting the issue, we'll address this in 16.9.0 release within 1-2 days

[cetincakiroglu]

Hi,

I've downloaded your example and check it with the #14102 and it seems that issue is no longer exist.

Thanks a lot for the detailed example and for reporting the issue!

Fixed in #14102