Keep primeng multiselect open on scroll

Question

I have a primeNG multiselect (p-multiselect) as part of a component library, which we're adding into a report with many other multiselects to create filters. Since upgrading to Angular 12, whenever a user scrolls outside of the report, the filter closes. We'd like the filter to remain open. I've tried appendTo="body" (results in no change in behavior) and [appendTo]="container" (misplaces the overaly on the page entirely) on a containing div, but the desired behavior is still not achieved. Is this possible with primeNG now, to keep the overlay open on scroll?

Answer 1

Seems this is happening due to the inner scroll-listener strategy, there is no option to modify it, best you can do is to unsubscribe, so the close event won't activate on scroll.

<p-multiSelect #multiSelector> </p-multiSelect>

You can get the reference of your multi-select instance using ViewChild

import { MultiSelect } from 'primeng/multiselect';
@ViewChild('multiSelector') multiSelector: MultiSelect;

Then

  ngAfterViewInit(): void {
    this.multiSelector.onPanelShow.subscribe(() => {
      this.multiSelector.unbindScrollListener();
    });
  }