Component: OverlayPanel

[livanova-incomm]

Describe the bug

OverlayPanel stays open if hide() method is invoked before animation is finished.

Use case:
I have several different elements and several corresponding overlay panels. Once I hover one of the elements, corresponding overlay panel should appear. Once I leave the element, the opened overlay panel should hide.

However, If I hover over the elements one by one pretty quickly, lots of panels stay open and never hide.

I did some investigation and found that it happens because of the isOverlayAnimationInProgress flag which prevents panels from closing.

Expected behavior:
Even if animation isn't finished, opened overlayPanel should be closed if hide() is invoked.

Environment

Window 10
Google Chrome 107.0.5304.107

Angular 14.0.4
PrimeNG 14.0.2

Reproducer

https://stackblitz.com/edit/github-1euknb?file=src/app/app.component.html

Angular version

14.0.4

PrimeNG version

14.2.2

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

16.14.2

Browser(s)

Google Chrome 107.0.5304.107

Steps to reproduce the behavior

Pre-conditions:

1. There are several elements (divs, table cells - whatever) on the page located close to each other.
2. There are corresponding overlay panels for each the element/div/table cell.
3. Hovering over one element should open corresponding overlayPanel.
4. Leaving the element should close the opened panel (.hide() is used).

Steps to reproduce:

1. Hover over all the elements pretty quickly (don't wait until each overlay panel is fully opened).
2. Observe lots of opened overlay panels.

See a demo I prepared: https://stackblitz.com/edit/github-1euknb?file=src/app/app.component.html

Expected behavior

Overlay panels should be closed if hide() method is invoked.

[cetincakiroglu]

Hi,

Thanks for reporting, the issue is added to the new milestone!

Regards