16.3.1 regression: p-overlayPanel dismisses when making changes to nested p-multiSelect with appendTo="body"

[NateRadebaugh]

Describe the bug

I have a p-multiSelect with appendTo="body" 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 and is still present in [email protected]

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.

Related: #13601

Environment

browser

Reproducer

https://stackblitz.com/edit/stackblitz-starters-hzx9fv?file=src%2Fmain.component.html

Angular version

16.2

PrimeNG version

16.4.2

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

Open overlay panel
Open multiselect
Choose an item
Overlay panel closes automatically!

Expected behavior

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

[erber014]

Can confirm this issue, this happens with more components than just the p-multiSelect, for example the calendar component. A previous issue similar to this exists here: #13950

[NateRadebaugh]

For now, I disabled the dismissable feature and manually handle dismissing the panel for now since otherwise this had me stuck on primeng@~16.1.0.

This workaround isn't ideal but got me moving forward to the latest primeng:

<p-overlayPanel
  #overlayPanel
  [dismissable]="false"
>
    <!-- ... -->
    <button type="text" (click)="overlaypanel.hide()">Cancel</button>
</p-overlaypanel>

[simoneraffaelli]

I ended up making another workaround, if someone is interested: #14323 (comment)

[simoneraffaelli]

as stated here: #14323

This problem is still present if you click the clear icon on the dropdown or if you uncheck the combobox

[padefi]

Hi guys!
Hope you're well.

I solved this issue by adding some parameters to the OverlayPanel and adding a div.

Here's my code (PrimeVue)

const allowHide = ref(true);

const handleHide = (event) => {
    if (!allowHide.value) {
        allowHide.value = true;
    }
};

// Handling clicks inside the OverlayPanel
const onContentMouseDown = () => {
    allowHide.value = false;
};

<OverlayPanel ref="expensesPanel" appendTo="body" :dismissable="false" @hide="handleHide">
 <div @mousedown.stop="onContentMouseDown">
   <DataTable v-model:filters="expensesFilters" :value="voucherExpensesArray" paginator :rows="5" dataKey="id" filterDisplay="row" :globalFilterFields="['name']">
   ....
  </DataTable>
  </div>
</OverlayPanel>