fix(cdk/drag-drop): don't disable native dragging on inactive handles (…

…#20991)

Currently we disable native drag interactions on handles once when they're registered,
however this can block scrolling on mobile devices if the handle is inactive (either it
is disabled or the drag element is disabled).

These changes toggle the state dynamically depending on the active state.

Fixes #20974.

(cherry picked from commit f133210)

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

@@ -727,6 +727,37 @@ describe('CdkDrag', () => {
       expect(styles.touchAction || (styles as any).webkitUserDrag).toBe('none');
     });
 
+    it('should enable native drag interactions on the drag handle if dragging is disabled', () => {
+      const fixture = createComponent(StandaloneDraggableWithHandle);
+      fixture.detectChanges();
+      fixture.componentInstance.draggingDisabled = true;
+      fixture.detectChanges();
+      const styles = fixture.componentInstance.handleElement.nativeElement.style;
+      expect(styles.touchAction || (styles as any).webkitUserDrag).toBeFalsy();
+    });
+
+    it('should enable native drag interactions on the drag handle if dragging is disabled ' +
+      'on init', () => {
+        const fixture = createComponent(StandaloneDraggableWithHandle);
+        fixture.componentInstance.draggingDisabled = true;
+        fixture.detectChanges();
+        const styles = fixture.componentInstance.handleElement.nativeElement.style;
+        expect(styles.touchAction || (styles as any).webkitUserDrag).toBeFalsy();
+      });
+
+    it('should toggle native drag interactions based on whether the handle is disabled', () => {
+      const fixture = createComponent(StandaloneDraggableWithHandle);
+      fixture.detectChanges();
+      fixture.componentInstance.handleInstance.disabled = true;
+      fixture.detectChanges();
+      const styles = fixture.componentInstance.handleElement.nativeElement.style;
+      expect(styles.touchAction || (styles as any).webkitUserDrag).toBeFalsy();
+
+      fixture.componentInstance.handleInstance.disabled = false;
+      fixture.detectChanges();
+      expect(styles.touchAction || (styles as any).webkitUserDrag).toBe('none');
+    });
+
     it('should be able to reset a freely-dragged item to its initial position', fakeAsync(() => {
       const fixture = createComponent(StandaloneDraggable);
       fixture.detectChanges();
@@ -5558,7 +5589,7 @@ class StandaloneDraggableSvgWithViewBox {
 
 @Component({
   template: `
-    <div #dragElement cdkDrag
+    <div #dragElement cdkDrag [cdkDragDisabled]="draggingDisabled"
       style="width: 100px; height: 100px; background: red; position: relative">
       <div #handleElement cdkDragHandle style="width: 10px; height: 10px; background: green;"></div>
     </div>
@@ -5569,6 +5600,7 @@ class StandaloneDraggableWithHandle {
   @ViewChild('handleElement') handleElement: ElementRef<HTMLElement>;
   @ViewChild(CdkDrag) dragInstance: CdkDrag;
   @ViewChild(CdkDragHandle) handleInstance: CdkDragHandle;
+  draggingDisabled = false;
 }
 
 @Component({

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

@@ -249,6 +249,7 @@ export class DragRef<T = any> {
     if (newValue !== this._disabled) {
       this._disabled = newValue;
       this._toggleNativeDragInteractions();
+      this._handles.forEach(handle => toggleNativeDragInteractions(handle, newValue));
     }
   }
   private _disabled = false;
@@ -342,7 +343,7 @@ export class DragRef<T = any> {
   /** Registers the handles that can be used to drag the element. */
   withHandles(handles: (HTMLElement | ElementRef<HTMLElement>)[]): this {
     this._handles = handles.map(handle => coerceElement(handle));
-    this._handles.forEach(handle => toggleNativeDragInteractions(handle, false));
+    this._handles.forEach(handle => toggleNativeDragInteractions(handle, this.disabled));
     this._toggleNativeDragInteractions();
     return this;
   }
@@ -458,8 +459,9 @@ export class DragRef<T = any> {
    * @param handle Handle element that should be disabled.
    */
   disableHandle(handle: HTMLElement) {
-    if (this._handles.indexOf(handle) > -1) {
+    if (!this._disabledHandles.has(handle) && this._handles.indexOf(handle) > -1) {
       this._disabledHandles.add(handle);
+      toggleNativeDragInteractions(handle, true);
     }
   }
 
@@ -468,7 +470,10 @@ export class DragRef<T = any> {
    * @param handle Handle element to be enabled.
    */
   enableHandle(handle: HTMLElement) {
-    this._disabledHandles.delete(handle);
+    if (this._disabledHandles.has(handle)) {
+      this._disabledHandles.delete(handle);
+      toggleNativeDragInteractions(handle, this.disabled);
+    }
   }
 
   /** Sets the layout direction of the draggable item. */