Component: p-overlayPanel - appendTo="body" trigger automatic hide event and closing the the p-overlayPanel.

[nypansson]

Describe the bug

Hi,
I am using p-overlayPanel and loading a p-table that has a context menu:
<p-contextMenu #cm [model]="menuItems" appendTo="body" styleClass="min-w-max">

I have identified after updating to latest PrimeNg release that appendTo="body" triggers by some reason a hide-event that will automatic close my p-overlayPanel. Any component that use appendTo="body" within the p-contextMenu will trigger this hide to appear. Right now have I removed appendTo="body" on all places. But for p-contextMenu its impossible as the menu without this setting will appear not attached to the row in the p-table.

Environment

Running node locally on my computer and use Angular / Primeng against a local Wildfly appliation server. The identified problem is only within PrimeNg/Angular.
Part of my package.json:
"dependencies": {
"@angular-devkit/build-angular": "16.2.6",
"@angular/animations": "16.2.8",
"@angular/cdk": "16.2.7",
"@angular/common": "16.2.8",
"@angular/compiler": "16.2.8",
"@angular/core": "16.2.8",
"@angular/forms": "16.2.8",
"@angular/platform-browser": "16.2.8",
"@angular/platform-browser-dynamic": "16.2.8",
"@angular/platform-server": "16.2.8",
"@angular/router": "16.2.8",
"@fullcalendar/angular": "^6.1.9",
"@fullcalendar/core": "^6.1.9",
"@fullcalendar/daygrid": "^6.1.9",
"@fullcalendar/interaction": "^6.1.9",
"@fullcalendar/list": "^6.1.9",
"@fullcalendar/resource": "^6.1.9",
"@fullcalendar/resource-timeline": "^6.1.9",
"@fullcalendar/timegrid": "^6.1.9",
"ajv-keywords": "^5.1.0",
"chart.js": "^4.4.0",
"classlist.js": "^1.1.20150312",
"core-js": "^3.33.0",
"dexie": "^3.2.4",
"font-awesome": "^4.7.0",
"hammerjs": "^2.0.8",
"nanoscroller": "0.8.7",
"node-sass": "^9.0.0",
"npm": "^10.2.0",
"primeflex": "^3.3.1",
"primeicons": "^6.0.1",
"primeng": "16.5.0",
"quill": "^1.3.7",
"rxjs": "^7.8.1",
"tslib": "^2.6.2",
"typescript": "5.1.6",
"web-animations-js": "^2.3.2",
"xlsx": "^0.18.5",
"zone.js": "~0.13.1"
},
"devDependencies": {
"@angular/cli": "16.2.6",
"@angular/compiler-cli": "16.2.8",
"@types/jasmine": "^5.1.0",
"@types/node": "^20.8.4",
"ajv": "^8.12.0",
"codelyzer": "^6.0.2",
"eslint": "^8.51.0",
"file-saver": "^2.0.5",
"jasmine-core": "~5.1.1",
"jasmine-spec-reporter": "~7.0.0",
"karma": "^6.4.2",
"karma-chrome-launcher": "~3.2.0",
"karma-cli": "~2.0.0",
"karma-coverage-istanbul-reporter": "~3.0.3",
"karma-jasmine": "~5.1.0",
"karma-jasmine-html-reporter": "^2.1.0",
"lite-server": "^2.6.1",
"prettier": "^3.0.3",
"pretty-quick": "^3.1.3",
"protractor": "~7.0.0",
"source-map-explorer": "^2.5.3",
"ts-node": "^10.9.1"
}

Reproducer

No response

Angular version

16.2.6

PrimeNG version

16.5.0

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

16.20.2

Browser(s)

No response

Steps to reproduce the behavior

1. Load p-overlayPanel with a p-table and p-contextMenu with the statement appendTo="body" within the context menu.
2. Select an item in the p-contextMenu.
3. The overlay panel will now close automatic after selected a menu item.

Expected behavior

p-overlayPanel should not close (get a an hide event) from "somewhere" - unclear who is emitting this event!

[lemonCMS]

I just wanted to say that i run into the same issue with V16.5.1, where the overlay panel closed on me when it was not supposed too.
I can reproduce the issue, but i was unable to find the cause that triggered the closing of the overlay panel.

[nypansson]

Ok! I have spent many hours around the issue. Hope someone can find the underlying reason. One other good example what is working or not working is the buttons within the overlay panel.
This will trigger hide:
<p-button *ngIf="!isInspectorEditDisabled() && editMode" [disabled]="inspectorPanelOverlayVisible" size="small" severity="success" (onClick)="saveInspector($event)" [label]="getSaveCreateText()" [icon]="businessConstants.ICON_PI_CHECK">
<ng-container *ngIf="selectedActivityModel != null && selectedActivityModel.activityId != null && isActionAllowedForFunction('WEB_ACTIVITIES', businessConstants.FUNC_DELETE)">
<p-button *ngIf="!isInspectorEditDisabled() && editMode" [disabled]="inspectorPanelOverlayVisible" size="small" severity="danger" (onClick)="removePressed($event)" [label]="getRemoveText()" [icon]="businessConstants.ICON_PI_TRASH">

By instead use the same p-button and swap between 'Edit' and 'Cancel' I can avoid the hide event to occur.
<p-button size="small" severity="{{getButtonColor()}}" [label]="getButtonText()" (onClick)="editCancelPressed($event)" [icon]="getButtonIcon()">

Could be something with that DOM is not changed when I skip the ngIf?

[nypansson]

Hi,
Just an update from me regarding the problem with this overlay-panel. The hide event occurs on several scenarios and makes actually current situation very problematic as we using overlay-panel quite much in our application.
I would be great if someone could look into this problem.
Kind regards
Per

[github-actions]

This issue has been automatically marked as stale due to a lack of activity. If this issue is still relevant to you, please leave a comment so we can keep it open. We apologize for not being able to prioritize it sooner. If you have any new information or questions, please share them in your comment!