fix(drag-drop): text selection not disabled on safari if user drags out of the viewport

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

@@ -155,6 +155,16 @@ describe('DragDropRegistry', () => {
     expect(dispatchTouchEvent(document, 'touchmove').defaultPrevented).toBe(true);
   });
 
+  it('should disable the native interactions on the body while dragging', () => {
+    const firstItem = testComponent.dragItems.first;
+
+    registry.startDragging(firstItem, createMouseEvent('mousedown'));
+    expect(document.body.classList).toContain('cdk-drag-drop-disable-native-interactions');
+
+    registry.stopDragging(firstItem);
+    expect(document.body.classList).not.toContain('cdk-drag-drop-disable-native-interactions');
+  });
+
 });
 
 @Component({

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

@@ -113,6 +113,10 @@ export class DragDropRegistry<I, C extends {id: string}> implements OnDestroy {
       const moveEvent = isTouchEvent ? 'touchmove' : 'mousemove';
       const upEvent = isTouchEvent ? 'touchend' : 'mouseup';
 
+      // We need to disable the native interactions on the entire body, because
+      // the user can start marking text if they drag too far in Safari.
+      this._document.body.classList.add('cdk-drag-drop-disable-native-interactions');
+
       // We explicitly bind __active__ listeners here, because newer browsers will default to
       // passive ones for `mousemove` and `touchmove`. The events need to be active, because we
       // use `preventDefault` to prevent the page from scrolling while the user is dragging.
@@ -133,6 +137,7 @@ export class DragDropRegistry<I, C extends {id: string}> implements OnDestroy {
 
     if (this._activeDragInstances.size === 0) {
       this._clearGlobalListeners();
+      this._document.body.classList.remove('cdk-drag-drop-disable-native-interactions');
     }
   }
 

src/cdk/drag-drop/drop.scss

@@ -8,7 +8,8 @@ $cdk-z-index-drag-preview: 1000;
 }
 
 .cdk-drag,
-.cdk-drag-handle {
+.cdk-drag-handle,
+.cdk-drag-drop-disable-native-interactions {
   touch-action: none;
   -webkit-user-drag: none;
   -webkit-tap-highlight-color: transparent;