Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dropdown overlay bug - baseZIndex property is unused in PrimeNG 12.2.0 #10713

Closed
RankXen opened this issue Oct 6, 2021 · 1 comment
Closed
Assignees
Labels
Type: Bug Issue contains a bug related to a specific component. Something about the component is not working
Milestone

Comments

@RankXen
Copy link

RankXen commented Oct 6, 2021

I'm submitting a ... (check one with "x")

[x] bug report => Search github for a similar issue or PR before submitting
[ ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

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.0

@yigitfindikli yigitfindikli added the Status: Pending Review Issue or pull request is being reviewed by Core Team label Oct 7, 2021
@yigitfindikli yigitfindikli self-assigned this Oct 7, 2021
@yigitfindikli yigitfindikli added this to the 12.2.1 milestone Oct 7, 2021
@yigitfindikli yigitfindikli added Type: Bug Issue contains a bug related to a specific component. Something about the component is not working and removed Status: Pending Review Issue or pull request is being reviewed by Core Team labels Oct 8, 2021
@rinukkusu
Copy link
Contributor

rinukkusu commented Feb 15, 2022

Hi, when will this be released? Is there a workaround until this will be released?

EDIT: ah nvm, this is actually the same bug, but in a different component (multiselect.ts)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Type: Bug Issue contains a bug related to a specific component. Something about the component is not working
Projects
None yet
Development

No branches or pull requests

3 participants