fix(cdk/drag-drop): dragging styles not reset once dragging is… (#17150)

When the user starts dragging an element we set some styles on it in order to prevent some native interactions like text selection, however we never reset them which can prevent the user from being able to start dragging from the same element afterwards.

Fixes #17139.

(cherry picked from commit e62e6bd)

Author: crisbeto

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

@@ -637,6 +637,24 @@ describe('CdkDrag', () => {
       expect(styles.touchAction || (styles as any).webkitUserDrag).toBe('none');
     }));
 
+    it('should re-enable drag interactions once dragging is over', fakeAsync(() => {
+      const fixture = createComponent(StandaloneDraggable);
+      fixture.detectChanges();
+      const dragElement = fixture.componentInstance.dragElement.nativeElement;
+      const styles = dragElement.style;
+
+      startDraggingViaMouse(fixture, dragElement);
+      dispatchMouseEvent(document, 'mousemove', 50, 100);
+      fixture.detectChanges();
+
+      expect(styles.touchAction || (styles as any).webkitUserDrag).toBe('none');
+
+      dispatchMouseEvent(document, 'mouseup', 50, 100);
+      fixture.detectChanges();
+
+      expect(styles.touchAction || (styles as any).webkitUserDrag).toBeFalsy();
+    }));
+
     it('should stop propagation for the drag sequence start event', fakeAsync(() => {
       const fixture = createComponent(StandaloneDraggable);
       fixture.detectChanges();

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

@@ -619,6 +619,7 @@ export class DragRef<T = any> {
 
     this._removeSubscriptions();
     this._dragDropRegistry.stopDragging(this);
+    this._toggleNativeDragInteractions();
 
     if (this._handles) {
       this._rootElement.style.webkitTapHighlightColor = this._rootElementTapHighlight;