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

[eXpertise7]

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:

2023-10-02.09-44-54.mp4

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.

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

I'm available for more demonstration or explanation.

[cetincakiroglu]

Hi,

Could you please share a stackblitz example so we can look into the code and identify the issue clearly?

[eXpertise7]

@cetincakiroglu Here you go: 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

[eXpertise7]

Do I need to create an issue at PrimeNG issue tracker? @cetincakiroglu

[cetincakiroglu]

Hi,

Thanks for reporting the issue, it seems that there is a bug in contextmenu. Could you please open an issue in the repo?

[eXpertise7]

primefaces/primeng#13949 Created. We can mark as answer this I guess?

Thanks.

Kind regards,
Robert Medved

[cetincakiroglu]

Thanks for creating the issue, we'll take a look at it.

[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