fix(cdk/drag-drop): element not draggable when has initial transform … (#22458)

* fix(cdk/drag-drop): element not draggable when has initial transform none

* fix(cdk/drag-drop): fix for recommended changes to code and tests cases

(cherry picked from commit 83d82b9)

Author: laiseng

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

@@ -407,6 +407,18 @@ describe('CdkDrag', () => {
       }));
     });
 
+    describe('mouse dragging when initial transform is none', () => {
+      it('should drag an element freely to a particular position', fakeAsync(() => {
+        const fixture = createComponent(StandaloneDraggable);
+        fixture.detectChanges();
+        const dragElement = fixture.componentInstance.dragElement.nativeElement;
+        dragElement.style.transform = 'none';
+
+        dragElementViaMouse(fixture, dragElement, 50, 100);
+        expect(dragElement.style.transform).toBe('translate3d(50px, 100px, 0px)');
+      }));
+    });
+
     it('should dispatch an event when the user has started dragging', fakeAsync(() => {
       const fixture = createComponent(StandaloneDraggable);
       fixture.detectChanges();

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

@@ -1277,8 +1277,12 @@ export class DragRef<T = any> {
 
     // Cache the previous transform amount only after the first drag sequence, because
     // we don't want our own transforms to stack on top of each other.
+    // Should be excluded none because none + translate3d(x, y, x) is invalid css
     if (this._initialTransform == null) {
-      this._initialTransform = this._rootElement.style.transform || '';
+      this._initialTransform = this._rootElement.style.transform
+                               && this._rootElement.style.transform != 'none'
+                               ? this._rootElement.style.transform
+                               : '';
     }
 
     // Preserve the previous `transform` value, if there was one. Note that we apply our own

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

@@ -82,5 +82,7 @@ export function toggleVisibility(element: HTMLElement,
  * that exited before the base transform was applied.
  */
 export function combineTransforms(transform: string, initialTransform?: string): string {
-  return initialTransform ? (transform + ' ' + initialTransform) : transform;
+  return initialTransform && initialTransform != 'none' ?
+      (transform + ' ' + initialTransform) :
+      transform;
 }