When select is in a pop-up modal, the select option don't follow input after scrolling the page

[Esain]

Reproduction link

https://stackblitz.com/edit/angular-nht15b?file=src/app/app.component.ts

Steps to reproduce

1. click Show Modal button
2. open the select input
3. scoll the page

What is expected?

select options always follow select input

What is actually happening?

select option is sepearted with select input after scroll the page

Environment	Info
ng-zorro-antd	13.2.2
Browser	chrome 101.0.4951.54

[Esain]

有人关注这个问题吗？ 别沉了呀

[Esain]

demo显示，在自定义可滚动元素中，cdk-overlay需要配合cdkScrollable指令使用。如何才可以在nz-modal中插入这个指令呢？

[NathanIceSea]

vote for this

[zawars]

Any update on the issue?

[jhimelymendoza]

I resolved that with a directive

import { ChangeDetectorRef, Directive, Inject, OnDestroy, OnInit, Renderer2 } from '@angular/core';
import { DOCUMENT } from '@angular/common';
import { NzSelectComponent } from 'ng-zorro-antd/select';

@Directive({
  selector: '[aysrCloseSelectOnScroll]'
})
export class CloseSelectOnScrollDirective implements OnInit, OnDestroy {
  // eslint-disable-next-line @typescript-eslint/no-empty-function
  listenerFn = () => {};
  constructor(
    private el: NzSelectComponent,
    private renderer: Renderer2,
    @Inject(DOCUMENT) private document: Document,
    private changeDetectorRef: ChangeDetectorRef
  ) {}

  ngOnInit(): void {
    const antModalWrap: HTMLCollectionOf<Element> = this.document.body.getElementsByClassName('ant-modal-wrap');

    this.listenerFn = this.renderer.listen(antModalWrap.item(0), 'scroll', (event) => {
      this.el.nzOpen = false;
      this.changeDetectorRef.detectChanges();
    });
  }

  ngOnDestroy(): void {
    this.listenerFn();
  }
}

and you can use it

  <nz-select aysrCloseSelectOnScroll formControlName="documentation">
              <nz-option [nzValue]="item.id" [nzLabel]="item.label" *ngFor="let item of documentation"></nz-option>
            </nz-select>
          </nz-form-control>

[ParsaArvanehPA]

This PR will fix the issue mentioned above for all components created with the CDK Overlay that are inside modals or drawers: #8804.

As a temporary fix, you can follow these steps:

• Create a wrapper inside your modal or drawer
• Add the cdkScrollable directive to the wrapper
• Set overflow: auto on the wrapper

This way, the wrapper will handle the scrolling.
You can refer to this link for a sample.