primereact icon indicating copy to clipboard operation
primereact copied to clipboard

Published 20 hours ago • verified publisher icon primefaces

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

Open nileshzala005 opened this issue 1 year ago • 6 comments

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. Z-index

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

nileshzala005 avatar Aug 13 '24 10:08 nileshzala005

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?

melloware avatar Aug 13 '24 11:08 melloware

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

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

nileshzala005 avatar Aug 13 '24 14:08 nileshzala005

cc @navedqb

melloware avatar Aug 13 '24 15:08 melloware

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.

madalina-agh avatar Aug 26 '24 14:08 madalina-agh

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 Screenshot 2024-10-07 at 14 01 50

ozziej avatar Oct 07 '24 12:10 ozziej

Converted this issue to a BUG

melloware avatar Oct 07 '24 12:10 melloware

It seems like this issue has been resolved in the latest version. Could you please confirm and provide more information if there are any updates? @nileshzala005

tanerengiiin avatar Feb 24 '25 08:02 tanerengiiin

@tanerengiiin this is still happening. What he is saying is the dialog keeps increasing its z-index but the dropdown component inside the dialog stays the same.

melloware avatar Feb 24 '25 14:02 melloware

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

Could you please check it in this reproducer? Or did I not understand the issue? @melloware

tanerengiiin avatar Feb 25 '25 09:02 tanerengiiin

Ahhh yes your reproducer is working their old one is on an older version of PrimeReact. This can be closed.

melloware avatar Feb 25 '25 12:02 melloware