Angular Material Drag and drop + scroll

Question

I using Angular Material (Angular 9.1.2, Material 9.2.1).

I have scrollable container and drag-drop lists (multiple lists) inside. In Mateiral v9 they add function to fix placeholder and sorting position withScrollableParents(). And it's setting properly, but... it's works only after sorting, draging or droping item on list. On first event after comonent init it doesn't. Any idea what I done wrong? Or I should create issue for Angular material?

  @ViewChildren(CdkDropList) dropLists: QueryList<CdkDropList>;

  protected setScrollContainer() {
    if (this.dropLists) {
      this.dropLists.forEach((x) => {
        const htmlElement = x.element.nativeElement;
        const scrolledElement = htmlElement.closest('.ps.ps--active-y') as HTMLElement;

        x._dropListRef.withScrollableParents([scrolledElement]);
      });
    }
  }

<div class="fields-list"
     cdkDropList
     #list2
     (mouseenter)="setScrollContainer()"
     [id]="addFiltersId(groupIndex, 'report-where')"
     [cdkDropListConnectedTo]="dragAndDropListsFilters"
     [cdkDropListData]="filtersGroup.filter"
     (cdkDropListDropped)="dropFilter($event, 0)">
</div>

Answer 1

You can simply add cdkScrollable to the HTML element you want to be scrollable.