Blocker: unresponsive browser if pressing ESC-key in combination with lots of tooltips or overlay panels

[MichaelHasenstab]

Describe the bug

In our applications we sometimes have quite large pages with complex component structures and many (PrimeNg) component instances. E.g. also serveral (PrimeNg) data tables per page potentially showing many rows also containing buttons and more complex components per row.

If using PrimeNG's tooltip feature on such pages, we face performance issues with ESC-key handling in general. So e.g. if wanting to close the suggestion overlay of an autocomplete component by pressing ESC-key, it can take several seconds until the suggestion overlay disappears. Depending on the size of the page, it can even lead to an unresponsive page. In profiling you can see, that many, many change detection cycles are triggered througout the ESC-key handling....

To test a potential fix, I created a copy of the PrimeNg tooltip directive source in my project, removed the @HostListener from the onEscapeKeydown method and implemented an alternative ESC-key event handler via window.addEventListener in order to hide the tooltips. Without the @HostListener annotation on onEscapeKeydown, the effect is gone.

By looking through the current PrimeNg sources, I found several other components using a similar approach to handle (ESC-)key, e.g. the OverlayPanel component. You can reproduce a similar effect if having overlay panel component in the data table rows as well! (And we also have such scenarios in our applications)

As this issue makes the browsers of our customers unresponsive, i would regard it as a blocker bug.

Environment

Reproducible with current PrimeNG versions (17.x and older) .

Reproducer

I created a stackblitz example based on current PrimeNg examples, which demonstrates the effect. To simulate a larger page with many components, I added a data table with many rows and buttons with tooltips per row. At top of the page there is an autocomplete component, by which you can test the ESC-key / suggestion overlay closing behaviour. See here:

https://stackblitz.com/edit/wswl7e

What you can test as well:

1. If you remove the pTooltip directives from the buttons in the html template of stackblitz example and repeat the testcase, the effect will be gone - autocomplete suggestion overlay will close immediately
2. If you remove the @HostListener annotation from onEscapeKeydown method in your Tooltip directive implementation, the effect will be gone - autocomplete suggestion overlay will close immediately

Angular version

18.0.1 (and 17.x)

PrimeNG version

17.18.11 (and older)

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

18.19.0

Browser(s)

current chrome, firefox or edge

Steps to reproduce the behavior

1. type in a text into the autocomplete field to bring up the suggestion overlay
2. When suggestion overlay is shown, press ESC-key once in order to close the suggestions

-> either it takes very long until the suggestion overlay is closed or the browser gets unresponsive completely - depending on amount of rows in datatable.

Expected behavior

The suggestion overlay closes immediately and browser must not get unresponsive in any case.