zIndex of ConfirmDialog is not adaptive (always less by one)

[gitkhartmann]

Describe the bug

The modal ConfirmDialog opened after a normal modal dialog has a zIndex lower than the normal dialog and is not visible anymore.

Environment

Angular version: 14.2.0
PrimeNG version: 14.2.3

Reproducer

No response

Angular version

14.2.0

PrimeNG version

14.2.3

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

9.1.2

Browser(s)

No response

Steps to reproduce the behavior

No response

Expected behavior

No response

[dkhrunov]

Same issue

[SoyDiego]

Can you share a stackblitz, please?

[dkhrunov]

Demo

Stackblitz

Steps to reproduce

1. Open sidebar
2. In the opened sidebar invoke confirm dialog

Expected behavior

• Since the ConfirmDialog opens after the Sidebar, the ConfirmDialog must be on top of the Sidebar.

Supposed Problem

I deep to styles and source code, and this is what I found out:

ConfirmDialog moveOnTop method call ZIndexUtils.set() util and sets this ConfirmDialog z-indexes styles and his backdrop (current z-index - 1).

And finally wrapper (backdrop) has same z-index (example on the screenshot above = z-index: 1101) the same as the previously opened sidebar z-index (example on the screenshot above = z-index: 1101). This leads to this problem described above.

Dialog modals (Dialog/DynamicDialog/ConfirmDialog components) uses backdrop as wrapper over dialog content. And its own (content) styles for z-index: 1102 overrides by backdrop z-index: 1101.

[dkhrunov]

I can suggest such a solution - increment the current z-index, which is stored in the ZIndexUtils utility for the Dialog, not by one, but by two points at once, then the backdrop value will be higher than the sidebar value.

[dkhrunov]

I can suggest such a solution - increment the current z-index, which is stored in the ZIndexUtils utility for the Dialog, not by one, but by two points at once, then the backdrop value will be higher than the sidebar value.

This is what we did in our code to get around this problem, and it works fine.

[SoyDiego]

Hi @dkhrunov, thanks for your examples and explanation.
I did a PR with your solution, you can check here: #13501.
When I have tested the problem, always I saw all perfectly and anything affect the functionality, only I saw the zIndex position repeated like you 1102 but doesn't affect my functionality or I don't know I didn't notice because all was working fine.
Anyway, I did the PR increasing the zIndex to have differents. Now we should wait if PrimeNG Team approve it.
Thanks!

[dkhrunov]

Hi @dkhrunov, thanks for your examples and explanation. I did a PR with your solution, you can check here: #13501. When I have tested the problem, always I saw all perfectly and anything affect the functionality, only I saw the zIndex position repeated like you 1102 but doesn't affect my functionality or I don't know I didn't notice because all was working fine. Anyway, I did the PR increasing the zIndex to have differents. Now we should wait if PrimeNG Team approve it. Thanks!

Good job 💪 & Thank you !