DragDrop Autoscroll feature not working with Material Table

Relates to https://github.com/angular/components/pull/16382

Reproduction

https://stackblitz.com/edit/angular-qczaca

Steps to reproduce:

1. Try dragging a row to the edge of its container.
2. You can see that Material Table cannot be autoscrolled while a simple container can be… (like the div in the Stackblitz example).

Expected Behavior

I can use autoscroll feature with Material Table as well.

Actual Behavior

Autoscroll does not work with Material Table.

Environment

Angular, CDK/Material:

    "@angular/animations": "~8.2.0",
    "@angular/cdk": "~8.1.2",
    "@angular/common": "~8.2.0",
    "@angular/compiler": "~8.2.0",
    "@angular/core": "~8.2.0",
    "@angular/forms": "~8.2.0",
    "@angular/material": "^8.1.2",
    "@angular/platform-browser": "~8.2.0",
    "@angular/platform-browser-dynamic": "~8.2.0",
    "@angular/router": "~8.2.0",
    "hammerjs": "^2.0.8"

    "@angular-devkit/build-angular": "~0.802.0",
    "@angular/cli": "~8.2.0",
    "@angular/compiler-cli": "~8.2.0",
    "@angular/language-service": "~8.2.0"

[liesahead]

@jraadt, The solution is not well documented, but it works like a charm. Add cdkScrollable to that div with outside classname. Here is the link, tell me if it helped: https://stackblitz.com/edit/angular-swaqkk-jdsxoo?file=src%2Fapp%2Fcdk-drag-drop-sorting-example.html

[kyle-apex]

I can see that there is an issue in above example. first time you want do drag row in the table beyond the container view (with the scroll), row is not moving correctly. It looks like it’s moved only between rows of initial view of the table ( rows that are visible when row is dragged first time). Also param of drop event returns wrong indexes. Second drag and drops works correctly. any Ideas how to solve this ?

In the current version, beforeStarted on the cdkDropList declares the element before calling beforeStarted; however, beforeStarted on the cdkDrag calls on time to avoid the issue you mentioned. Adjusting @shlomiassaf’s solution, the following worked for me:

Add actualContainer=“div.example-container” to the element with cdkDrag instead of cdkDropList and adjust the directive as following:

import { Directive, Input, ElementRef, AfterViewInit } from '@angular/core';
import { CdkDrag } from '@angular/cdk/drag-drop';

@Directive({
  selector: '[cdkDrag][actualContainer]',
})
export class CdkDropListActualContainerDirective {
  @Input('actualContainer') actualContainer: string;
  originalElement: ElementRef<HTMLElement>;

  constructor(cdkDrag: CdkDrag) {
    cdkDrag._dragRef.beforeStarted.subscribe( () => {
      var cdkDropList = cdkDrag.dropContainer;
      if (!this.originalElement) {
        this.originalElement = cdkDropList.element;
      }

      if ( this.actualContainer ) {
        const element = this.originalElement.nativeElement.closest(this.actualContainer) as HTMLElement;
        cdkDropList._dropListRef.element = element;
        cdkDropList.element = new ElementRef<HTMLElement>(element);
      } else {
        cdkDropList._dropListRef.element = cdkDropList.element.nativeElement;
        cdkDropList.element = this.originalElement;
      }
    });
  }
}