Component: Pick List

[leoncydsilva]

Describe the bug

If PickList component is used in Dynamic Dialog, when dragging the items from source or target the items goes behind the dialog

Screen.Recording.2023-08-18.at.9.39.33.PM.mov

Environment

Happens on all env

Reproducer

https://stackblitz.com/edit/github-n1wv7s?file=src%2Fapp%2Fapp.component.ts

Angular version

16.2.1

PrimeNG version

16.2.0

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

16.20.1

Browser(s)

Chrome 115.0.5790.170

Steps to reproduce the behavior

1. Insert Pick List Component in Dynamic Dialog
2. If we try to drag items from source or target, the item goes behind dialog

Expected behavior

No response

[leoncydsilva]

PS: I tried setting autoZIndex: false and baseZIndex: 100000 but now table column header is on top of dialog, but drag is working fine . . Updated slackblitz with latest code and table

[SoyDiego]

Hi @leoncydsilva , I have checked the problem and you are right.
I did a PR solving the problem. You can check it here: #13515
Now we should wait PrimeNG Team approve it if they think the solution is OK for them.

If you want a temporal solution until PrimeNG Team approve it, in your .css you can use:

.cdk-drag-preview {
    z-index: 2000 !important;
}

Thanks

[leoncydsilva]

Hey @SoyDiego thanks a ton, will be using your workaround until the PR gets merged

[SoyDiego]

Hey @SoyDiego thanks a ton, will be using your workaround until the PR gets merged

Happy to help, bro 🚀