How to avoid p-dropdown from closing on body scroll apart from appendTo="body"

Question

I am using Angular version 12 and PrimeNG version 12 for my project. For the same I am using primeng dropdown which gets closed on scrolling the body. Using appendTo="body" doesn't close the dropdown on scroll but moves the dropdown panel with it. Many people have faced this issue but I haven't found any workaround for it still.

<div class="customScroll">
  <p-dropdown
    filter="true"
    [options]="options" 
    [(ngModel)]="model" 
    (onChange)="filterTable()"
    [style]="{'width': '100%', 'margin-top': '10px', 'font-family': 'Roboto Regular'}"
  >
  </p-dropdown>
</div>

Answer 1

You can patch this by passing an overlayOptions

[overlayOptions]="getOverlayOptions()"

defined as:

getOverlayOptions(): OverlayOptions {
    return {
      listener: (event: Event, options?: OverlayListenerOptions) => {
        return false;
      }
    };
}

As per @SyamPradeep's comment, if you require the overlay to close when clicking outside, but not on scroll you can use:

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

If anyone cares for the story behind this patch:
You will notice that when testing their components on their website it does not happen, I highly suspect someone is preventing scroll event propagation to hide a bug, as when I cloned their project and inside their own project I made a new container that has a scrollbar, the same unintended behavior occurs.
Anyway, upon further source inspection you will find a line that has unusual code regarding scroll listeners like:

x || y 

where both have side effects, and the second one will only be executed if the first one returns something evaluated as false. I do not have time to give the exact files and line numbers as it was a rather long process of resolving this issue.

Answer 2

you need to use appendTo="body" property of PrimeNG dropdown