fix(cdk/drag-drop): element not draggable when has initial transform … #22458
Conversation
google-cla
bot
added
the
cla: yes
| @@ -347,6 +347,51 @@ describe('CdkDrag', () => { | |||
| })); | |||
| }); | |||
|
|
|||
| describe('mouse dragging when initial transform is none', () => { | |||
| it('should drag an element freely to a particular position', fakeAsync(() => { | |||
There was a problem hiding this comment.
I think that we only really need this test, the rest can be removed.
src/cdk/drag-drop/drag-ref.ts
Outdated
| // 'none' is valid css transform value but none + translate3d(x, y, z) is invalid. | ||
| // Note that we apply our own transform before the user's, because things like | ||
| // rotation can affect which direction the element will be translated towards. | ||
| this._rootElement.style.transform = this._initialTransform |
There was a problem hiding this comment.
Rather than checking here, it might be easier to check inside _applyRootElementTransform before saving the value to _initialTransform. That way we don't have to account for it again if we add any new places that read from _initialTransform.
| </div> | ||
| ` | ||
| }) | ||
| class StandaloneDraggableWithInitialTransformNone { |
There was a problem hiding this comment.
Rather than creating a new fixture, you should be able to reuse the StandaloneDraggable and adjust the test. E.g. something like:
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)');
crisbeto
added
action: merge
mmalerba
force-pushed
the
fix/cdk-drag-tranform-none-issue
branch
2 times, most recently
from
4eaab40 to
845154c
Compare
mmalerba
force-pushed
the
fix/cdk-drag-tranform-none-issue
branch
from
845154c to
101e3ff
Compare
|
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
existing cdkDrag will concat current transform value with what's calculated by cdkDrag.
cdkDrag broken when initial transform value is none because
transform: noneis valid css buttransform: none translate3d(x, y, x)is not.i've added test cases to test cdkDrag that has initial
transform: nonevalue