fix(drag-drop): not picking up initial disabled state of handle (angu…

…lar#16643)

Fixes the `CdkDrag` directive not picking up the `disabled` state of a handle, if it was set before `CdkDrag` subscribed to its `_stateChanges` stream.

Fixes angular#16642.

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

@@ -1224,6 +1224,18 @@ describe('CdkDrag', () => {
       expect(dragElement.style.transform).toBeFalsy();
     }));
 
+    it('should not be able to drag the element if the handle is disabled before init',
+      fakeAsync(() => {
+        const fixture = createComponent(StandaloneDraggableWithPreDisabledHandle);
+        fixture.detectChanges();
+        const dragElement = fixture.componentInstance.dragElement.nativeElement;
+        const handle = fixture.componentInstance.handleElement.nativeElement;
+
+        expect(dragElement.style.transform).toBeFalsy();
+        dragElementViaMouse(fixture, handle, 50, 100);
+        expect(dragElement.style.transform).toBeFalsy();
+      }));
+
     it('should not be able to drag using the handle if the element is disabled', fakeAsync(() => {
       const fixture = createComponent(StandaloneDraggableWithHandle);
       fixture.detectChanges();
@@ -4709,6 +4721,25 @@ class StandaloneDraggableWithHandle {
   @ViewChild(CdkDragHandle) handleInstance: CdkDragHandle;
 }
 
+@Component({
+  template: `
+    <div #dragElement cdkDrag
+      style="width: 100px; height: 100px; background: red; position: relative">
+      <div
+        #handleElement
+        cdkDragHandle
+        [cdkDragHandleDisabled]="disableHandle"
+        style="width: 10px; height: 10px; background: green;"></div>
+    </div>
+  `
+})
+class StandaloneDraggableWithPreDisabledHandle {
+  @ViewChild('dragElement', {static: false}) dragElement: ElementRef<HTMLElement>;
+  @ViewChild('handleElement', {static: false}) handleElement: ElementRef<HTMLElement>;
+  @ViewChild(CdkDrag, {static: false}) dragInstance: CdkDrag;
+  disableHandle = true;
+}
+
 @Component({
   template: `
     <div #dragElement cdkDrag

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

@@ -257,7 +257,9 @@ export class CdkDrag<T = any> implements AfterViewInit, OnChanges, OnDestroy {
           }),
           // Listen if the state of any of the handles changes.
           switchMap((handles: QueryList<CdkDragHandle>) => {
-            return merge(...handles.map(item => item._stateChanges)) as Observable<CdkDragHandle>;
+            return merge(...handles.map(item => {
+              return item._stateChanges.pipe(startWith(item));
+            })) as Observable<CdkDragHandle>;
           }),
           takeUntil(this._destroyed)
         ).subscribe(handleInstance => {