ng-select dropdown panel not closed and in fixed position, while scrolling ag-grid container

[sri-ir]

ng-select dropdown panel with apend to body is not closed and in fixed position while scrolling ag-grid container.

look at the below stackblitz example
https://stackblitz.com/edit/ag-grid-ng-select-scroll-issue-dzhsph

Is there any way or simple solution to close ng-select dropdown panel while scrolling other containers like in example.

[kamilchlebek]

@varnastadeus What new feature would you expect here?

@sri-ir
I think that there are two solutions:

• add appendTo=".ag-body-container" (ng-select will scroll along with ag-grid)
• manually listen to select (open) event -> save opened instance, then listen to ag-grid (scroll) event and close opened select if any. What do you think?

[varnastadeus]

I think we could have some sort close on scroll thing. Also we could investigate having overflow container which will block other scrolls until control is opened

[ndeepaksri]

@varnastadeus What new feature would you expect here?

@sri-ir
I think that there are two solutions:

• add appendTo=".ag-body-container" (ng-select will scroll along with ag-grid)
• manually listen to select (open) event -> save opened instance, then listen to ag-grid (scroll) event and close opened select if any. What do you think?

First option helped, thanks.

[zeleznak]

If I want to keep the dropdown in body, so that it overlaps outside the scrollable area, it still doesn't update the position.

I found some solution that works for me and updates the dropdown position when scrolling.
Please check this.
https://stackoverflow.com/questions/44516017/how-to-handle-window-scroll-event-in-angular-4/54005183

  ngOnInit(): void {
    let eventOptions: AddEventListenerOptions | boolean;
    if (supportsPassiveEventListeners()) { //use the implementation on mozilla
      eventOptions = normalizePassiveListenerOptions({
        capture: true,
        passive: true
      });
    } else {
      eventOptions = true;
    }
    this.ngZone.runOutsideAngular(() => {
      window.addEventListener('scroll', this.scroll, eventOptions);
    });
  }

  ngOnDestroy() {
    window.removeEventListener('scroll', this.scroll, true);
  }

  scroll = (event: Event): void => {
    if (this.select && this.select.isOpen) {
      this.ngZone.run(() => {
        this.select.dropdownPanel.adjustPosition();
      });
    }
  };

[ifourJayBrahmbhatt]

@sri-ir I think that there are two solutions:

• add appendTo=".ag-body-container" (ng-select will scroll along with ag-grid)

I tried appending it to this class but as it is in cellEditor it throws this error
"appendTo selector .ag-body-container did not found any parent element"