Dialog: Escape listener closes everything always

[LoaderB0T]

Describe the bug

When opening a panel of sorts (dropdown, multi-select, calendar, etc.) and pressing escape to close it (accessibility), not only does the panel close but also the dialog.

As far as I can tell, primeng just globally listens for escape in some locations and closes everything that's opened. It would be great if only the latest / top level would react to the escape key. This seems to have been an issue for a long time.

I would be very happy to create a PR with a proposal for a fix, but I would require some guidance beforehand on how I should go about fixing the issue.

---

Idea 1: Using the current focus (check if the panel contains document.activeElement) or el.matches(':focus') to check if the panel should be closed. issues: The element does not necessarily have the focus

Idea 2: Make the global escape listener smarter and only close the latest still-existing element (Some sort of global escape listener registry)

Idea 3: Again making the global escape listener a bit smarter, but by using the computed z Index of a panel to determine which one is the top level. This might not work when multiple dialogs are opened in non-modal mode. There the focus would make more sense.

Idea 4: Escape listeners have a priority-based execution order. Panels like calendar, dropdown etc have a higher prior and are executed first. The listener gives feedback on whether something closed. If something has been closed no further listeners are executed. Basically like event.stopPropagation(). This would at least solve the issue for controls within dialog, but does not change anything for multiple dialogs (which would be fine for us at the moment as multiple dialogs opened are not ideal anyway and it could be changed in the future with an additional issue).

---

My stomach tells me option 4 might work and not be too complicated and reliable.

Open for more ideas and discussion. I might also provide more varieties of use-cases or edge cases for the problem in the stackblitz to have more test cases.

Feedback & ideas are appreciated. For our company accessibility is becoming more & more important and small seeming issues like this one are a real pain for people who rely on keyboard usage.

Thanks!

Environment

https://stackblitz.com/edit/github-bwbrvj?file=src%2Fapp%2Fapp.component.html

Reproducer

https://stackblitz.com/edit/github-bwbrvj?file=src%2Fapp%2Fapp.component.html

Angular version

18.0.1

PrimeNG version

17.18.12 & 18.x.x & 19.1.0

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

20.18.0

Browser(s)

All

Steps to reproduce the behavior

See stackblitz!

Expected behavior

Only the top level panel closes

[github-actions[bot]]

Due to PrimeNG team's busy roadmap, this issue is available for anyone to work on. Make sure to reference this issue in your pull request. :sparkles: Thank you for your contribution! :sparkles:

[mkutowski]

Stumbled across this problem as well (v17.18.15). Makes you have to use [clonseOnEscape]="false" to then implement proper closing logic yourself on dialogs.

Hoping the Pull Request gets merged 👍