fix(drag-drop): fix drag start delay behavior to allow scrolling (#16228)

The current implementation of the drag start delay does not allow scrolling on mobile devices.
Instead, the draggable element gets teleported to the cursor once the delay is elapsed.

In order to handle this use case, we cancel the drag sequence if the cursor moves before
the drag start delay is elapsed and we disable native drag interactions only when the
drag sequence is started instead of when it is initialized.

The drag start delay was also integrated to the drag drop demo.

Fixes #16224

Author: Aboisier

src/cdk/drag-drop/directives/drag.spec.ts

@@ -604,14 +604,38 @@ describe('CdkDrag', () => {
       const dragElement = fixture.componentInstance.dragElement.nativeElement;
       const styles = dragElement.style;
 
-      expect(styles.touchAction || (styles as any).webkitUserDrag).toBe('none');
+      expect(styles.touchAction || (styles as any).webkitUserDrag).toBeFalsy();
 
       fixture.componentInstance.dragInstance.disabled = true;
       fixture.detectChanges();
 
       expect(styles.touchAction || (styles as any).webkitUserDrag).toBeFalsy();
     }));
 
+    it('should enable native drag interactions if not dragging', fakeAsync(() => {
+      const fixture = createComponent(StandaloneDraggable);
+      fixture.detectChanges();
+      const dragElement = fixture.componentInstance.dragElement.nativeElement;
+      const styles = dragElement.style;
+
+      expect(styles.touchAction || (styles as any).webkitUserDrag).toBeFalsy();
+    }));
+
+    it('should disable native drag interactions if dragging', fakeAsync(() => {
+      const fixture = createComponent(StandaloneDraggable);
+      fixture.detectChanges();
+      const dragElement = fixture.componentInstance.dragElement.nativeElement;
+      const styles = dragElement.style;
+
+      expect(styles.touchAction || (styles as any).webkitUserDrag).toBeFalsy();
+
+      startDraggingViaMouse(fixture, dragElement);
+      dispatchMouseEvent(document, 'mousemove', 50, 100);
+      fixture.detectChanges();
+
+      expect(styles.touchAction || (styles as any).webkitUserDrag).toBe('none');
+    }));
+
     it('should stop propagation for the drag sequence start event', fakeAsync(() => {
       const fixture = createComponent(StandaloneDraggable);
       fixture.detectChanges();
@@ -765,7 +789,7 @@ describe('CdkDrag', () => {
       }).toThrowError(/^cdkDrag must be attached to an element node/);
     }));
 
-    it('should allow for the dragging sequence to be delayed', fakeAsync(() => {
+    it('should cancel drag if the mouse moves before the delay is elapsed', fakeAsync(() => {
       // We can't use Jasmine's `clock` because Zone.js interferes with it.
       spyOn(Date, 'now').and.callFake(() => currentTime);
       let currentTime = 0;
@@ -780,13 +804,52 @@ describe('CdkDrag', () => {
       startDraggingViaMouse(fixture, dragElement);
       currentTime += 750;
       dispatchMouseEvent(document, 'mousemove', 50, 100);
+      currentTime += 500;
       fixture.detectChanges();
 
       expect(dragElement.style.transform)
-          .toBeFalsy('Expected element not to be moved if the drag timeout has not passed.');
+          .toBeFalsy('Expected element not to be moved if the mouse moved before the delay.');
+    }));
 
-      // The first `mousemove` here starts the sequence and the second one moves the element.
+    it('should enable native drag interactions if mouse moves before the delay', fakeAsync(() => {
+      // We can't use Jasmine's `clock` because Zone.js interferes with it.
+      spyOn(Date, 'now').and.callFake(() => currentTime);
+      let currentTime = 0;
+
+      const fixture = createComponent(StandaloneDraggable);
+      fixture.componentInstance.dragStartDelay = 1000;
+      fixture.detectChanges();
+      const dragElement = fixture.componentInstance.dragElement.nativeElement;
+      const styles = dragElement.style;
+
+      expect(dragElement.style.transform).toBeFalsy('Expected element not to be moved by default.');
+
+      startDraggingViaMouse(fixture, dragElement);
+      currentTime += 750;
+      dispatchMouseEvent(document, 'mousemove', 50, 100);
       currentTime += 500;
+      fixture.detectChanges();
+
+      expect(styles.touchAction || (styles as any).webkitUserDrag).toBeFalsy();
+    }));
+
+    it('should allow dragging after the drag start delay is elapsed', fakeAsync(() => {
+      // We can't use Jasmine's `clock` because Zone.js interferes with it.
+      spyOn(Date, 'now').and.callFake(() => currentTime);
+      let currentTime = 0;
+
+      const fixture = createComponent(StandaloneDraggable);
+      fixture.componentInstance.dragStartDelay = 500;
+      fixture.detectChanges();
+      const dragElement = fixture.componentInstance.dragElement.nativeElement;
+
+      expect(dragElement.style.transform).toBeFalsy('Expected element not to be moved by default.');
+
+      dispatchMouseEvent(dragElement, 'mousedown');
+      fixture.detectChanges();
+      currentTime += 750;
+
+      // The first `mousemove` here starts the sequence and the second one moves the element.
       dispatchMouseEvent(document, 'mousemove', 50, 100);
       dispatchMouseEvent(document, 'mousemove', 50, 100);
       fixture.detectChanges();
@@ -801,22 +864,17 @@ describe('CdkDrag', () => {
       let currentTime = 0;
 
       const fixture = createComponent(StandaloneDraggable);
-      fixture.componentInstance.dragStartDelay = '1000';
+      fixture.componentInstance.dragStartDelay = '500';
       fixture.detectChanges();
       const dragElement = fixture.componentInstance.dragElement.nativeElement;
 
       expect(dragElement.style.transform).toBeFalsy('Expected element not to be moved by default.');
 
-      startDraggingViaMouse(fixture, dragElement);
-      currentTime += 750;
-      dispatchMouseEvent(document, 'mousemove', 50, 100);
+      dispatchMouseEvent(dragElement, 'mousedown');
       fixture.detectChanges();
-
-      expect(dragElement.style.transform)
-          .toBeFalsy('Expected element not to be moved if the drag timeout has not passed.');
+      currentTime += 750;
 
       // The first `mousemove` here starts the sequence and the second one moves the element.
-      currentTime += 500;
       dispatchMouseEvent(document, 'mousemove', 50, 100);
       dispatchMouseEvent(document, 'mousemove', 50, 100);
       fixture.detectChanges();

src/cdk/drag-drop/drag-ref.ts

@@ -523,7 +523,13 @@ export class DragRef<T = any> {
       // direction. Note that this is preferrable over doing something like `skip(minimumDistance)`
       // in the `pointerMove` subscription, because we're not guaranteed to have one move event
       // per pixel of movement (e.g. if the user moves their pointer quickly).
-      if (isOverThreshold && (Date.now() >= this._dragStartTime + (this.dragStartDelay || 0))) {
+      if (isOverThreshold) {
+        const isDelayElapsed = Date.now() >= this._dragStartTime + (this.dragStartDelay || 0);
+        if (!isDelayElapsed) {
+          this._endDragSequence(event);
+          return;
+        }
+
         // Prevent other drag sequences from starting while something in the container is still
         // being dragged. This can happen while we're waiting for the drop animation to finish
         // and can cause errors, because some elements might still be moving around.
@@ -586,6 +592,14 @@ export class DragRef<T = any> {
 
   /** Handler that is invoked when the user lifts their pointer up, after initiating a drag. */
   private _pointerUp = (event: MouseEvent | TouchEvent) => {
+    this._endDragSequence(event);
+  }
+
+  /**
+   * Clears subscriptions and stops the dragging sequence.
+   * @param event Browser event object that ended the sequence.
+   */
+  private _endDragSequence(event: MouseEvent | TouchEvent) {
     // Note that here we use `isDragging` from the service, rather than from `this`.
     // The difference is that the one from the service reflects whether a dragging sequence
     // has been initiated, whereas the one on `this` includes whether the user has passed
@@ -639,6 +653,8 @@ export class DragRef<T = any> {
       this._lastTouchEventTime = Date.now();
     }
 
+    this._toggleNativeDragInteractions();
+
     if (this._dropContainer) {
       const element = this._rootElement;
 
@@ -701,7 +717,6 @@ export class DragRef<T = any> {
       rootElement.style.webkitTapHighlightColor = 'transparent';
     }
 
-    this._toggleNativeDragInteractions();
     this._hasStartedDragging = this._hasMoved = false;
     this._initialContainer = this._dropContainer!;
 
@@ -1016,7 +1031,7 @@ export class DragRef<T = any> {
       return;
     }
 
-    const shouldEnable = this.disabled || this._handles.length > 0;
+    const shouldEnable = this._handles.length > 0 || !this.isDragging();
 
     if (shouldEnable !== this._nativeInteractionsEnabled) {
       this._nativeInteractionsEnabled = shouldEnable;

src/dev-app/drag-drop/drag-drop-demo-module.ts

@@ -12,6 +12,7 @@ import {NgModule} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 import {MatFormFieldModule} from '@angular/material/form-field';
 import {MatIconModule} from '@angular/material/icon';
+import {MatInputModule} from '@angular/material/input';
 import {MatSelectModule} from '@angular/material/select';
 import {RouterModule} from '@angular/router';
 import {DragAndDropDemo} from './drag-drop-demo';
@@ -23,6 +24,7 @@ import {DragAndDropDemo} from './drag-drop-demo';
     FormsModule,
     MatFormFieldModule,
     MatIconModule,
+    MatInputModule,
     MatSelectModule,
     RouterModule.forChild([{path: '', component: DragAndDropDemo}]),
   ],

src/dev-app/drag-drop/drag-drop-demo.html

@@ -48,7 +48,7 @@ <h2>Horizontal list</h2>
 
 <div class="demo-list">
   <h2>Free dragging</h2>
-  <div cdkDrag class="demo-free-draggable" [cdkDragLockAxis]="axisLock">Drag me around</div>
+  <div cdkDrag class="demo-free-draggable" [cdkDragLockAxis]="axisLock" [cdkDragStartDelay]="dragStartDelay">Drag me around</div>
 </div>
 
 <div>
@@ -69,3 +69,11 @@ <h2>Axis locking</h2>
     </mat-select>
   </mat-form-field>
 </div>
+
+<div>
+  <h2>Drag start delay</h2>
+
+  <mat-form-field>
+    <input matInput placeholder="Drag start delay" value="0" [(ngModel)]="dragStartDelay">
+  </mat-form-field>
+</div>

src/dev-app/drag-drop/drag-drop-demo.ts

@@ -21,6 +21,7 @@ import {CdkDragDrop, moveItemInArray, transferArrayItem} from '@angular/cdk/drag
 })
 export class DragAndDropDemo {
   axisLock: 'x' | 'y';
+  dragStartDelay = 0;
   todo = [
     'Go out for Lunch',
     'Make a cool app',