Describe the bug

Hello PrimeNG Community,

I'm encountering a bad user experience issue with the p-dropdown component when used inside a draggable dialog (popup). When the dropdown list is open and the user drags the dialog, the dropdown list remains in its original position, detached from the dialog. This looks visually broken and provides a poor user experience.

I understand this is the intended behavior (the dropdown list is appended to body so it can overflow and look correctly), but I'm looking for guidance on how to solve or work around this. I'm seeking suggestions from the community on best practices or techniques to improve this interaction.

The issue is not that the dropdown is broken, but that the visual result of the dragging interaction is undesirable. I cannot simply increase the dialog height, because I just need one dropdown in the entire popup. I even tried appending it to an element inside or around the dialog but had no luck

Pull Request Link

No response

Reason for not contributing a PR

• Lack of time
• Unsure how to implement the fix/feature
• Difficulty understanding the codebase
• Other

Other Reason

No response

Reproducer

https://stackblitz.com/edit/stackblitz-starters-yxya3rik?file=src%2Fapp%2Fapp.component.html

Environment

Angular v17
Primeng v17
Browser any latest(using chrome and edge)

Angular version

17

PrimeNG version

v17 (LTS Only)

Node version

No response

Browser(s)

Any latest(we are using chrome and edge)

Steps to reproduce the behavior

• Open the popup dialog which contains the p-dropdown component.
• Click on the dropdown to open the overlay list.
• While the dropdown is open, try moving (dragging) the popup dialog.
• Stackblitz : https://stackblitz.com/edit/stackblitz-starters-yxya3rik?file=src%2Fapp%2Fapp.component.html

Expected behavior

The dropdown overlay should move along with the popup dialog, keeping its relative position to the input field.