primefaces / primeng

The Most Complete Angular UI Component Library
https://primeng.org
Other
10.39k stars 4.59k forks source link

Dynamic Dialog, p-dropdown, p-overlayPanel: Dropdown content, overlay content is hidden when I scrolling page in Dynamic Dialog #12874

Open Chienpv00 opened 1 year ago

Chienpv00 commented 1 year ago

Describe the bug

I use Dynamic Dialog and open myComponent, In my myComponent, i use some p-dropdown, p-overlayPanel. But when I open dropdown or overlay panel, it close when i scrolling in Dialog content. Can some one help me update it.

Environment

Angular 15.1.0 primeng: 15.2.1 rxjs: 7.5.0 zone: 0.11.4

Reproducer

https://stackblitz.com/edit/angular-7tjqb9?file=src/app/app.module.ts

Angular version

15.1.0

PrimeNG version

15.2.1

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

v16.19.0

Browser(s)

Chrome

Steps to reproduce the behavior

  1. open dialog (use Dynamic dialog)
  2. open dropdown
  3. scroll content

Expected behavior

Overlay panel or dropdown content don't hide when I scroll content in dialog

syam38 commented 11 months ago

@Chienpv00 I am also looking for a solution, were you able to fix it?

Chienpv00 commented 11 months ago

I still can't fix it, could you help me. thanks

syam38 commented 6 months ago

@Chienpv00 This can be solved by passing [overlayOptions] input to the p-dropdown component of primeng 15.

We can send the below options to the component and it worked for me. I found this by digging deeper into dropdown.ts and overlay.ts files of primg ng.

getOverlayOptions(): OverlayOptions {
    return {
      listener: (event: Event, options?: OverlayListenerOptions) => {
     if (options.type === 'scroll') {
        return false;
      }
      return options.valid;
      }
    };
}