ng-select drop down position is not correct in scroll able div

I am facing issue with ng-select when it is used in scroll able div. Please find the screen shot -

Issue : The gap is coming between search text box and drop down, downtown should move with search input box. To reproduce the issue - https://stackblitz.com/edit/ng-select-uygqu1?file=app%2Fapp.component.ts

click on the first drop down (ng-select). It will open up the available options. Now scroll by using two finger on laptop mouse key pad / scroll from mouse.

Any help is much appreciated.

Thanks in Advance.

Follow this Link- https://ng-select.github.io/ng-select#/append-to-element

I am facing this issue in my angular project when, I am using ng-select in modal. If, dropdown is opened and trying to scroll modal that time.. I tried every existing solutions for this problem but those solutions are not helpful for me. Then, I solved my problem like below..

Solution - Create a wrapper, keep ng-select inside of that wrapper and add appendTo attribute in ng-select with dot(.)

<div class="userList-wrapper" style="position: relative">
  <div style="overflow-y: auto; overflow-x: hidden">
    <ng-select
      appendTo=".userList-wrapper"
      [items]="userList"
      class="no-shadow no-outline"
      bindLabel="name"
      bindValue="name"
      [searchable]="true"
      [clearable]="false"
      placeholder="Select user name"
    </ng-select>
  </div>
</div>