fix(drag-drop): showing touch device tap highlight when using a handle (#14549)

Currently we disable all native drag interactions on the elements that we bind events to. Since when a `cdkDrag` has a handle, we don't remove its tap highlight which means that iOS will show a dark overlay over it. These changes disable the tap highlight while dragging.

Author: crisbeto

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

@@ -684,6 +684,58 @@ describe('CdkDrag', () => {
           .toBe('translate3d(50px, 100px, 0px)', 'Expected to drag the element by its handle.');
     }));
 
+    it('should disable the tap highlight while dragging via the handle', fakeAsync(() => {
+      // This test is irrelevant if the browser doesn't support styling the tap highlight color.
+      if (!('webkitTapHighlightColor' in document.body.style)) {
+        return;
+      }
+
+      const fixture = createComponent(StandaloneDraggableWithHandle);
+      fixture.detectChanges();
+      const dragElement = fixture.componentInstance.dragElement.nativeElement;
+      const handle = fixture.componentInstance.handleElement.nativeElement;
+
+      expect(dragElement.style.webkitTapHighlightColor).toBeFalsy();
+
+      startDraggingViaMouse(fixture, handle);
+
+      expect(dragElement.style.webkitTapHighlightColor).toBe('transparent');
+
+      dispatchMouseEvent(document, 'mousemove', 50, 100);
+      fixture.detectChanges();
+
+      dispatchMouseEvent(document, 'mouseup', 50, 100);
+      fixture.detectChanges();
+
+      expect(dragElement.style.webkitTapHighlightColor).toBeFalsy();
+    }));
+
+    it('should preserve any existing `webkitTapHighlightColor`', fakeAsync(() => {
+      // This test is irrelevant if the browser doesn't support styling the tap highlight color.
+      if (!('webkitTapHighlightColor' in document.body.style)) {
+        return;
+      }
+
+      const fixture = createComponent(StandaloneDraggableWithHandle);
+      fixture.detectChanges();
+      const dragElement = fixture.componentInstance.dragElement.nativeElement;
+      const handle = fixture.componentInstance.handleElement.nativeElement;
+
+      dragElement.style.webkitTapHighlightColor = 'purple';
+
+      startDraggingViaMouse(fixture, handle);
+
+      expect(dragElement.style.webkitTapHighlightColor).toBe('transparent');
+
+      dispatchMouseEvent(document, 'mousemove', 50, 100);
+      fixture.detectChanges();
+
+      dispatchMouseEvent(document, 'mouseup', 50, 100);
+      fixture.detectChanges();
+
+      expect(dragElement.style.webkitTapHighlightColor).toBe('purple');
+    }));
+
   });
 
   describe('in a drop container', () => {

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

@@ -155,6 +155,12 @@ export class DragRef<T = any> {
    */
   private _rootElement: HTMLElement;
 
+  /**
+   * Inline style value of `-webkit-tap-highlight-color` at the time the
+   * dragging was started. Used to restore the value once we're done dragging.
+   */
+  private _rootElementTapHighlight: string | null;
+
   /** Subscription to pointer movement events. */
   private _pointerMoveSubscription = Subscription.EMPTY;
 
@@ -502,6 +508,10 @@ export class DragRef<T = any> {
     this._removeSubscriptions();
     this._dragDropRegistry.stopDragging(this);
 
+    if (this._handles) {
+      this._rootElement.style.webkitTapHighlightColor = this._rootElementTapHighlight;
+    }
+
     if (!this._hasStartedDragging) {
       return;
     }
@@ -567,6 +577,7 @@ export class DragRef<T = any> {
     const isDragging = this.isDragging();
     const isTouchSequence = isTouchEvent(event);
     const isAuxiliaryMouseButton = !isTouchSequence && (event as MouseEvent).button !== 0;
+    const rootElement = this._rootElement;
     const isSyntheticEvent = !isTouchSequence && this._lastTouchEventTime &&
       this._lastTouchEventTime + MOUSE_EVENT_IGNORE_TIME > Date.now();
 
@@ -591,6 +602,14 @@ export class DragRef<T = any> {
       this._initialTransform = this._rootElement.style.transform || '';
     }
 
+    // If we've got handles, we need to disable the tap highlight on the entire root element,
+    // otherwise iOS will still add it, even though all the drag interactions on the handle
+    // are disabled.
+    if (this._handles.length) {
+      this._rootElementTapHighlight = rootElement.style.webkitTapHighlightColor;
+      rootElement.style.webkitTapHighlightColor = 'transparent';
+    }
+
     this._toggleNativeDragInteractions();
     this._hasStartedDragging = this._hasMoved = false;
     this._initialContainer = this.dropContainer!;