16.3.1 regression: p-overlayPanel dismisses when making changes to nested p-multiSelect

[NateRadebaugh]

Describe the bug

I have a p-multiSelect inside of p-overlayPanel. When the user toggles selection of a p-multiSelect, the p-overlayPanel dismisses.

This is a regression that started when I upgraded from 16.1.x to 16.3.1.

Environment

browser

Reproducer

No response

Angular version

16.2

PrimeNG version

16.3.1

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

v18.17.1

Browser(s)

Chrome

Steps to reproduce the behavior

1. Open overlay panel
2. Open multiselect
3. Choose an item
4. Overlay panel closes automatically!

Expected behavior

Overlay panel should stay open until I click away or programatically close it.

[penihel]

i think i have the same problem with p-calendar here #13605

[penihel]

nothing about this?

[penihel]

nothing ? :(

[gamerish96]

Hi, I have the same problem by using a p-listbox component inside the OverlayPanel. The problem is present starting from version 16.3.0, as I found out by testing the versions from 16.0.0 to 16.3.1 the last "safe" version where the bug is not present is 16.2.0.

By navigating the issues I think the regression was introduced with the fix from #13480.

[penihel]

nothing ? :(

[anlampe]

Hi @gamerish96, I created a second PR #13810 which restores even more of the original code of the OverlayPanel, because your fix alone didn't work for us (See stackblitz example). Maybe you could have a look.

[gamerish96]

Hi @anlampe, I tested your example with the dropdown with my fix applied and without the appendTo="body" it works, you could try it too.

[anlampe]

Hi @anlampe, I tested your example with the dropdown with my fix applied and without the appendTo="body" it works, you could try it too.

Sure, but it also worked with appendTo="body" before, so I'd perfer to fix both. Thanks for having a look.

[zakharenkov]

I confirm. Appears in version 16.5.0.
The problem appears if you uncheck the checkbox itself, and not the string next to it!
Workaround: e?.originalEvent?.stopPropagation() in OnChange.

[jayee]

Please fix this annoying bug

[NateRadebaugh]

This is not fixed in 16.7.1 still

@anlampe I've found that this reproduces when I use appendTo="body" on the p-multiSelect inside of the p-overlayPanel since the updated code in p-overlayPanel considers it a "click away" even though the actual component is within the overlay.

Here's a stackblitz simple example:
https://stackblitz.com/edit/stackblitz-starters-hzx9fv?file=src%2Fmain.component.html

[anlampe]

Yes, I'm aware of this issue (See #13601 (comment)). Unfortunately only #13809 was merged, so I updated #13810 and am still waiting for a review.

[NateRadebaugh]

Thanks -- @cetincakiroglu is this something on your radar?

[anlampe]

Since the two issues I referenced in my PR are closed and I still didn't receive any recation for more than a month now, I'd suggest to create a new one which explicitly addresses the bug with appendTo="body".

[NateRadebaugh]

Good idea, I've opened a new bug with the updated details #14120