p-menu popup breaks when appendTo="body" [popup]="true" and routerLink/navigate (overlay doesn't close)

[SoyDiego]

Describe the bug

When the p-menu has the option appendTo="body" [popup]="true" and the item we're clicking has a routerLink or inside the command a this.router.navigate() or this.router.navigateByUrl() the popup doesn't close and it's shown in the page navigated.
In PrimeNG 20.2.0 it's working perfectly (my last version) in PrimeNG 21 it's not working

The first option of this menu is a routerLink, when I click it, it navigates but the menu doesn't close.

Pull Request Link

No response

Reason for not contributing a PR

• Lack of time
• Unsure how to implement the fix/feature
• Difficulty understanding the codebase
• Other

Other Reason

No response

Reproducer

Environment

Angular version

21

PrimeNG version

v21

Node version

24

Browser(s)

No response

Steps to reproduce the behavior

1. Have 2 pages with routing.
2. Put a p-menu with appendTo="body" [popup]="true" and one item with routerLink to the other page.
3. When Angular navigates to the other pages the menu doesn't close.

Expected behavior

Menu closes

[SoyDiego]

Hi @cetincakiroglu, I cannot contact to you more in Discord :(
Any help or idea here? :) Thanks

[Wycza]

Sam problem here (v. 21.02).

@SoyDiego if you need a quick fix until it is fixed you can do this:

init(): void {
    this.router.events
      .pipe(
        filter((event) => event instanceof NavigationStart),
        takeUntilDestroyed(this.destroyRef)
      )
      .subscribe(() => {
        this.clearMenuPopups();
      });
  }

  /**
   * TODO: Remove this when https://github.com/primefaces/primeng/issues/19213 is fixed
   */
  private clearMenuPopups(): void {
    const menuElements = document.querySelectorAll('body > [name="p-anchored-overlay"]');
    menuElements.forEach((node) => {
      node.remove();
    });
  }

[SoyDiego]

Your workaround works perfectly @Wycza. Thanks!!
Maybe you can create a PR with the solution or if I can I will do it.
I will keep open this issue because PrimeNG Team can see the solution.

Thanks again :)

[utillity]

please also see bug #19191 - that bug is not completely fixed!

[aaron-za-dev]

I have the same problem, and to add to that, this error appears in the desktop view, but everything works fine when using "responsive" mode.

[pavelekNET]

Same issue for all types of popovers

example:
<p-popover #popoverComparisonOperator> <ng-template #content> <p-listbox [options]="comparisonOperators" [ngModel]="conditionBlock.comparisonOperator" (ngModelChange)=" popoverComparisonOperator.toggle($event); " optionLabel="label" optionValue="value" styleClass="border-none" [filter]="true" /> </ng-template> </p-popover>

im getting errors in console:

i have that popover inside modal and when i click somewhere else it gets closed (correct) but when I close the modal it appears back out of nowhere!

Switching back to 20.4.0, everything works perfectly fine.

[aaron-za-dev]

@SoyDiego It appears to be an issue with the new animation API. If you perform the navigation after a 500ms delay, the problem seems to be resolved; you can apply this as a temporary solution.

[SoyDiego]

@SoyDiego It appears to be an issue with the new animation API. If you perform the navigation after a 500ms delay, the problem seems to be resolved; you can apply this as a temporary solution.

Hi @aaron-za-dev thanks for share the workaround but I couldn't understand you.
Could you please explain step by step?

I appreaciate!

[nZeus]

@SoyDiego We have a similar issue as the OP. It worked in v20, got broken in v21.
We decided to use the workaround with the timer for now:

setTimeout(() => {
	// this.#router.navigate(....);
}, 350)