OverlayPanel Component Closes on click of overlay-panel-content

[PraveenRL]

Describe the bug

Hello, I'm experiencing an issue between PrimeNG versions. In version 16.8.0, the overlay is closing when clicking it's own content.

To make the scenario clear, I'm using p-calendar (selectionMode="range") inside p-overlayPanel for some purpose. On selecting the date it's okay, but on click of month change icons, month, year and in month/year selection mode selecting month and year it's getting closed.

This issue was not occurred in v16.2.0, but in latest version eg: v16.7.2, v16.8.0 this issue occurs.

Environment

Windows 10

Reproducer

https://stackblitz.com/edit/overlay-panel-close-on-its-content-v16-8-0?file=package.json

Angular version

16.2.1

PrimeNG version

^16.8.0

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

18.10.0

Browser(s)

All, Chrome, Edge latest version

Steps to reproduce the behavior

1. Click on Start Date field, popup will open
2. Click on Month navigation change icons, the popup will get closed
3. Similarly on click of month and year, it's getting closed

Expected behavior

1. Click on Start Date field, popup should open - OK
2. Click on Month navigation change icons, the popup should not close, it will navigate to next and previous month
3. Similarly on click of month and year, the popup should not close, month/year view should shown and select month or year, on selecting these the popup should not gets closed.
4. It should close only on click outside popup

[erber014]

We have the same issue in our application, we are using calendars, checkboxes and a table in our overlayPanel and these all trigger a close of the overlayPanel for several different interactions with these components.

[pete-mcwilliams]

#13605 was supposed to be fixed in 16.7.0 but it does not look like it was.
https://stackblitz.com/edit/xzstuc?file=package.json

[macallejah]

We have same issues in our application, we use multiselect inside overlay-panel, when we delete selected item on multiselect, overlay-panel close.

We believe that the problem is that the event to remove the element from the multiselect arrives before and delete selection, and then the overlay-panel check to see if the click has come from a component inside it and it is not on its list and decide to close the overlay.

bindDocumentClickListener() {
if (isPlatformBrowser(this.platformId)) {
if (!this.documentClickListener && this.dismissable) {
let documentEvent = DomHandler.isIOS() ? 'touchstart' : 'click';
const documentTarget = this.el ? this.el.nativeElement.ownerDocument : this.document;
this.documentClickListener = this.renderer.listen(documentTarget, documentEvent, (event) => {
if (!this.container?.contains(event.target) && this.target !== event.target && !this.target.contains(event.target)) {
this.hide(); ---> HERE OVERLAYPANEL IS CLOSED
}
this.cd.markForCheck();
});
}
}
}

[pete-mcwilliams]

e26b9ee this commit removed the check for !this.selfclick which is set by

            this.overlayEventListener = (e) => {
                if (this.container && this.container.contains(e.target)) {
                    this.selfClick = true;
                }
            };

            this.overlaySubscription = this.overlayService.clickObservable.subscribe(this.overlayEventListener);

[hervehobbes]

Hello,
Same problem for me but just with the multiSelect component.
Each time we click on the panel used to show multiselect options, it will close itself automatically.

• Primeng: 16.5.1
• Angular: 16.2.6
• Node: 18.18.2
• NPM: 9.8.1

[MartinMa]

Having the same issue with current PrimeNG version 16.9.1.

[hervehobbes]

Problem solved by adding this to the multiselect tag :
appendTo="body"

[pete-mcwilliams]

appendTo="body" does not resolve the issue with inline calendar in overlay panels.

[roman-balzer]

simple (click)=func() on a div/component also closes the panel, v17 btw

#14120 (comment) for those that search a workaround

[FernandoBonfimArctica]

this bug continues on primeNg 16.9.1
any solution?