diff --git a/src/cdk/drag-drop/directives/drag.spec.ts b/src/cdk/drag-drop/directives/drag.spec.ts index 1c7020d075e1..0d370a443bc2 100644 --- a/src/cdk/drag-drop/directives/drag.spec.ts +++ b/src/cdk/drag-drop/directives/drag.spec.ts @@ -1152,6 +1152,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(); @@ -4481,6 +4493,25 @@ class StandaloneDraggableWithHandle { @ViewChild(CdkDragHandle) handleInstance: CdkDragHandle; } +@Component({ + template: ` +
+
+
+ ` +}) +class StandaloneDraggableWithPreDisabledHandle { + @ViewChild('dragElement', {static: false}) dragElement: ElementRef; + @ViewChild('handleElement', {static: false}) handleElement: ElementRef; + @ViewChild(CdkDrag, {static: false}) dragInstance: CdkDrag; + disableHandle = true; +} + @Component({ template: `
implements AfterViewInit, OnChanges, OnDestroy { }), // Listen if the state of any of the handles changes. switchMap((handles: QueryList) => { - return merge(...handles.map(item => item._stateChanges)) as Observable; + return merge(...handles.map(item => { + return item._stateChanges.pipe(startWith(item)); + })) as Observable; }), takeUntil(this._destroyed) ).subscribe(handleInstance => {