Skip to content

Commit c9bafcc

Browse files
crisbetoVivian Hu
authored andcommitted
fix(drag-drop): incorrectly preserving transform if root element changes (#14697)
Currently we cache the element's initial transform so that we can preserve it after the user has dragged it, however if the root element changes, the cached value will be incorrect. These changes reset the transforms if the root element changes.
1 parent 32f990a commit c9bafcc

File tree

2 files changed

+21
-0
lines changed

2 files changed

+21
-0
lines changed

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

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -490,6 +490,26 @@ describe('CdkDrag', () => {
490490
expect(dragElement.style.transform).toBeFalsy();
491491
}));
492492

493+
it('should preserve the initial transform if the root element changes', fakeAsync(() => {
494+
const fixture = createComponent(DraggableWithAlternateRoot);
495+
fixture.detectChanges();
496+
const dragElement = fixture.componentInstance.dragElement.nativeElement;
497+
const alternateRoot = fixture.componentInstance.dragRoot.nativeElement;
498+
499+
dragElement.style.transform = 'translateX(-50%)';
500+
dragElementViaMouse(fixture, dragElement, 50, 100);
501+
expect(dragElement.style.transform).toContain('translateX(-50%)');
502+
503+
alternateRoot.style.transform = 'scale(2)';
504+
fixture.componentInstance.rootElementSelector = '.alternate-root';
505+
fixture.detectChanges();
506+
507+
dragElementViaMouse(fixture, alternateRoot, 50, 100);
508+
509+
expect(alternateRoot.style.transform).not.toContain('translateX(-50%)');
510+
expect(alternateRoot.style.transform).toContain('scale(2)');
511+
}));
512+
493513
it('should handle the root element selector changing after init', fakeAsync(() => {
494514
const fixture = createComponent(DraggableWithAlternateRoot);
495515
fixture.detectChanges();

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -323,6 +323,7 @@ export class DragRef<T = any> {
323323

324324
element.addEventListener('mousedown', this._pointerDown, activeEventListenerOptions);
325325
element.addEventListener('touchstart', this._pointerDown, passiveEventListenerOptions);
326+
this._initialTransform = undefined;
326327
this._rootElement = element;
327328
}
328329

0 commit comments

Comments
 (0)