Z index is increasing on every close and open action for Dialog component

[nileshzala005]

Describe the bug

Dialog component increasing z-index by 1 on every close and open action. this issue stopped other components(e.g. dropdown list item) from rendering inside the dialog component.

Reproducer

https://stackblitz.com/edit/bp4c3k?file=src%2FApp.jsx

System Information

"primereact": "^10.8.2",

Steps to reproduce the behavior

1. Click on the Show button on the above demo project
2. Open the developer tool and see the z-index of dialog HTML code, it's increasing on every close and open dialog action

Expected behavior

z-index of dialog HTML code should not increase by 1 on every close and open action

[melloware]

This is by design as every time the dialog opens it must be on top so its z-index is increased. All the PrimeTek libs work the same way.

What is your real issue?

[nileshzala005]

@melloware When the z-index is reached more than 2103, it does not display dropdowns properly. Please refer to this updated demo

Please provide a workaround for this and update the above demo.

[melloware]

cc @navedqb

[madalina-agh]

I'm facing the same issue. I guess that the way it was intended to work was to set the z-index just higher by 1 in relation to the current highest on the page. The actual implementation just keeps growing each Dialog opening by 1, reaching very high values if the page is not refreshed in a while.

[ozziej]

Can confirm that this is an issue with drop down items inside a dialog, I can easily reproduce.
Z-index on dialog goes from 2302 -> 4604 but the dropdown stays at z-index of 1001 for the dropdown.

Classes that have the low z-index are :

PrimeReact 10.8.3

[melloware]

Converted this issue to a BUG