Dropdown overlay bug - baseZIndex property is unused in PrimeNG 12.2.0 #10713
Labels
Type: Bug
Issue contains a bug related to a specific component. Something about the component is not working
Milestone
I'm submitting a ... (check one with "x")
Current behavior
Using a dropdown in a container with a high z-index (higher than 1000) makes the dropdown unusable.
Dropdown overlay z-index is always 1001, baseZIndex property is unused in the code (a simple search on the github shows the baseZIndex property is not used anymore whereas in the previous version the overlay z-index was calculated using baseZIndex)
Code snippet from dropdown.component.ts 12.2.0:
if (this.autoZIndex) { ZIndexUtils.set('overlay', this.overlay, this.config.zIndex.overlay); }
Expected behavior
The overlay is visible.
Code snipper from dropdown.component.ts 11.4.5:
if (this.autoZIndex) { this.overlay.style.zIndex = String(this.baseZIndex + (++DomHandler.zindex)); }
Minimal reproduction of the problem with instructions
Have a container with a z-index > 1000. (For example 2000)
Have a dropdown, appendTo="body" and configure baseZIndex="2001"
When inspecting, you will notice the overlay does still have z-index equal to 1001
What is the motivation / use case for changing the behavior?
The dropdown is unusable for containers with a high z-index since the overlay is hidden behind the container.
Please tell us about your environment:
Operating System: Windows 10 64-bit
Angular version: 12.2.8
PrimeNG version: 12.2.0
Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]
Chrome Version 80.0.3987.149 (Official Build) (64-bit)
Node (for AoT issues):
node --version
= v14.18.0The text was updated successfully, but these errors were encountered: