From de05a67be18003a7848ca4a3aa4503bdead14eb4 Mon Sep 17 00:00:00 2001
From: laiseng <glaiseng@gmail.com>
Date: Mon, 12 Apr 2021 14:53:02 +0800
Subject: [PATCH 1/2] fix(cdk/drag-drop): element not draggable when has
 initial transform none

---
 src/cdk/drag-drop/directives/drag.spec.ts | 88 +++++++++++++++++++++++
 src/cdk/drag-drop/drag-styling.ts         |  4 +-
 2 files changed, 91 insertions(+), 1 deletion(-)

diff --git a/src/cdk/drag-drop/directives/drag.spec.ts b/src/cdk/drag-drop/directives/drag.spec.ts
index 7bdae5b6d3db..25c85ee29cdf 100644
--- a/src/cdk/drag-drop/directives/drag.spec.ts
+++ b/src/cdk/drag-drop/directives/drag.spec.ts
@@ -407,6 +407,51 @@ describe('CdkDrag', () => {
       }));
     });
 
+    describe('mouse dragging when initial transform is none', () => {
+      it('should drag an element freely to a particular position', fakeAsync(() => {
+        const fixture = createComponent(StandaloneDraggableWithInitialTransformNone);
+        fixture.detectChanges();
+        const dragElement = fixture.componentInstance.dragElement.nativeElement;
+
+        expect(dragElement.style.transform).toBe('none');
+        dragElementViaMouse(fixture, dragElement, 50, 100);
+        expect(dragElement.style.transform).toBe('translate3d(50px, 100px, 0px)');
+      }));
+
+      it('should drag an SVG element freely to a particular position', fakeAsync(() => {
+        const fixture = createComponent(StandaloneDraggableSvgWithInitialTransformNone);
+        fixture.detectChanges();
+        const dragElement = fixture.componentInstance.dragElement.nativeElement;
+
+        expect(dragElement.style.transform).toBe('none');
+        dragElementViaMouse(fixture, dragElement, 50, 100);
+        expect(dragElement.getAttribute('transform')).toBe('translate(50 100)');
+      }));
+
+      it('should drag an SVG element freely to a particular position in SVG viewBox coordinates',
+        fakeAsync(() => {
+          const fixture = createComponent(StandaloneDraggableSvgWithViewBoxInitialTranformNone);
+          fixture.detectChanges();
+          const dragElement = fixture.componentInstance.dragElement.nativeElement;
+
+          expect(dragElement.style.transform).toBe('none');
+          dragElementViaMouse(fixture, dragElement, 50, 100);
+          expect(dragElement.getAttribute('transform')).toBe('translate(100 200)');
+        }));
+    });
+
+    describe('touch dragging when initial transform is none', () => {
+      it('should drag an element freely to a particular position', fakeAsync(() => {
+        const fixture = createComponent(StandaloneDraggableWithInitialTransformNone);
+        fixture.detectChanges();
+        const dragElement = fixture.componentInstance.dragElement.nativeElement;
+
+        expect(dragElement.style.transform).toBe('none');
+        dragElementViaTouch(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();
@@ -5936,6 +5981,21 @@ class StandaloneDraggable {
   freeDragPosition?: {x: number, y: number};
 }
 
+@Component({
+  template: `
+    <div class="wrapper" style="width: 200px; height: 200px; background: green;">
+      <div
+        cdkDrag
+        #dragElement
+        style="transform: none; width: 100px; height: 100px; background: red;"></div>
+    </div>
+  `
+})
+class StandaloneDraggableWithInitialTransformNone {
+  @ViewChild('dragElement') dragElement: ElementRef<HTMLElement>;
+  @ViewChild(CdkDrag) dragInstance: CdkDrag;
+}
+
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
@@ -5960,6 +6020,34 @@ class StandaloneDraggableSvg {
   @ViewChild('dragElement') dragElement: ElementRef<SVGElement>;
 }
 
+@Component({
+  template: `
+    <svg><g
+      cdkDrag
+      style="transform: none"
+      #dragElement>
+      <circle fill="red" r="50" cx="50" cy="50"/>
+    </g></svg>
+  `
+})
+class StandaloneDraggableSvgWithInitialTransformNone {
+  @ViewChild('dragElement') dragElement: ElementRef<SVGElement>;
+}
+
+@Component({
+  template: `
+    <svg width="400px" height="400px" viewBox="0 0 800 800"><g
+      cdkDrag
+      style="transform: none"
+      #dragElement>
+      <circle fill="red" r="50" cx="50" cy="50"/>
+    </g></svg>
+  `
+})
+class StandaloneDraggableSvgWithViewBoxInitialTranformNone {
+  @ViewChild('dragElement') dragElement: ElementRef<SVGElement>;
+}
+
 @Component({
   template: `
     <svg width="400px" height="400px" viewBox="0 0 800 800"><g
diff --git a/src/cdk/drag-drop/drag-styling.ts b/src/cdk/drag-drop/drag-styling.ts
index d1c2d4e83865..82145fce7d6a 100644
--- a/src/cdk/drag-drop/drag-styling.ts
+++ b/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;
 }

From 101e3ff516ef0dd536d4539d05e6c404700ed974 Mon Sep 17 00:00:00 2001
From: laiseng <glaiseng@gmail.com>
Date: Tue, 13 Apr 2021 15:27:19 +0800
Subject: [PATCH 2/2] fix(cdk/drag-drop): fix for recommended changes to code
 and tests cases

---
 src/cdk/drag-drop/directives/drag.spec.ts | 80 +----------------------
 src/cdk/drag-drop/drag-ref.ts             |  6 +-
 2 files changed, 7 insertions(+), 79 deletions(-)

diff --git a/src/cdk/drag-drop/directives/drag.spec.ts b/src/cdk/drag-drop/directives/drag.spec.ts
index 25c85ee29cdf..85b97a61ebf4 100644
--- a/src/cdk/drag-drop/directives/drag.spec.ts
+++ b/src/cdk/drag-drop/directives/drag.spec.ts
@@ -409,45 +409,12 @@ describe('CdkDrag', () => {
 
     describe('mouse dragging when initial transform is none', () => {
       it('should drag an element freely to a particular position', fakeAsync(() => {
-        const fixture = createComponent(StandaloneDraggableWithInitialTransformNone);
-        fixture.detectChanges();
-        const dragElement = fixture.componentInstance.dragElement.nativeElement;
-
-        expect(dragElement.style.transform).toBe('none');
-        dragElementViaMouse(fixture, dragElement, 50, 100);
-        expect(dragElement.style.transform).toBe('translate3d(50px, 100px, 0px)');
-      }));
-
-      it('should drag an SVG element freely to a particular position', fakeAsync(() => {
-        const fixture = createComponent(StandaloneDraggableSvgWithInitialTransformNone);
+        const fixture = createComponent(StandaloneDraggable);
         fixture.detectChanges();
         const dragElement = fixture.componentInstance.dragElement.nativeElement;
+        dragElement.style.transform = 'none';
 
-        expect(dragElement.style.transform).toBe('none');
         dragElementViaMouse(fixture, dragElement, 50, 100);
-        expect(dragElement.getAttribute('transform')).toBe('translate(50 100)');
-      }));
-
-      it('should drag an SVG element freely to a particular position in SVG viewBox coordinates',
-        fakeAsync(() => {
-          const fixture = createComponent(StandaloneDraggableSvgWithViewBoxInitialTranformNone);
-          fixture.detectChanges();
-          const dragElement = fixture.componentInstance.dragElement.nativeElement;
-
-          expect(dragElement.style.transform).toBe('none');
-          dragElementViaMouse(fixture, dragElement, 50, 100);
-          expect(dragElement.getAttribute('transform')).toBe('translate(100 200)');
-        }));
-    });
-
-    describe('touch dragging when initial transform is none', () => {
-      it('should drag an element freely to a particular position', fakeAsync(() => {
-        const fixture = createComponent(StandaloneDraggableWithInitialTransformNone);
-        fixture.detectChanges();
-        const dragElement = fixture.componentInstance.dragElement.nativeElement;
-
-        expect(dragElement.style.transform).toBe('none');
-        dragElementViaTouch(fixture, dragElement, 50, 100);
         expect(dragElement.style.transform).toBe('translate3d(50px, 100px, 0px)');
       }));
     });
@@ -5981,21 +5948,6 @@ class StandaloneDraggable {
   freeDragPosition?: {x: number, y: number};
 }
 
-@Component({
-  template: `
-    <div class="wrapper" style="width: 200px; height: 200px; background: green;">
-      <div
-        cdkDrag
-        #dragElement
-        style="transform: none; width: 100px; height: 100px; background: red;"></div>
-    </div>
-  `
-})
-class StandaloneDraggableWithInitialTransformNone {
-  @ViewChild('dragElement') dragElement: ElementRef<HTMLElement>;
-  @ViewChild(CdkDrag) dragInstance: CdkDrag;
-}
-
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: `
@@ -6020,34 +5972,6 @@ class StandaloneDraggableSvg {
   @ViewChild('dragElement') dragElement: ElementRef<SVGElement>;
 }
 
-@Component({
-  template: `
-    <svg><g
-      cdkDrag
-      style="transform: none"
-      #dragElement>
-      <circle fill="red" r="50" cx="50" cy="50"/>
-    </g></svg>
-  `
-})
-class StandaloneDraggableSvgWithInitialTransformNone {
-  @ViewChild('dragElement') dragElement: ElementRef<SVGElement>;
-}
-
-@Component({
-  template: `
-    <svg width="400px" height="400px" viewBox="0 0 800 800"><g
-      cdkDrag
-      style="transform: none"
-      #dragElement>
-      <circle fill="red" r="50" cx="50" cy="50"/>
-    </g></svg>
-  `
-})
-class StandaloneDraggableSvgWithViewBoxInitialTranformNone {
-  @ViewChild('dragElement') dragElement: ElementRef<SVGElement>;
-}
-
 @Component({
   template: `
     <svg width="400px" height="400px" viewBox="0 0 800 800"><g
diff --git a/src/cdk/drag-drop/drag-ref.ts b/src/cdk/drag-drop/drag-ref.ts
index 05c3db7df8b6..37e2a64f7d92 100644
--- a/src/cdk/drag-drop/drag-ref.ts
+++ b/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