bug(drag-drop): drag-drop broken when initialTransform is none

[laiseng]

Reproduction

when any cdkDrag item has initial transform: none will not be draggable.

Use sample repo that reproduce this problem at https://github.com/laiseng/bug-angular-cdk-drag-initial-transform-none

Steps to reproduce:

1. clone https://github.com/laiseng/bug-angular-cdk-drag-initial-transform-none
2. yarn install
3. ng serve
4. drag first div box that has no initial transform value
5. drag 2nd div box that has style transform: none

Expected Behavior

2nd div box with initial value transform: none should be draggable

Actual Behavior

failed to drag 2nd div box that has style transform: none

PR #22431

bug is cause by attempting to preserve existing transform value using string concat at line below in
angular-components\src\cdk\drag-drop\drag-ref.ts line :1239
this._rootElement.style.transform = this._initialTransform ? transform + ' ' + this._initialTransform : transform; }
should have check for none and assign empty string for initialTransform value.
CSS transform: none translate(10px, 10px); is invalid value

Environment

• Angular:
  "@angular/core": "~11.2.5",

• CDK/Material:
  "@angular/cdk": "^11.2.8",
  "@angular/material": "^11.2.8",

• Browser(s):

• Windows 10 Chrome v89.0.4389.114

[crisbeto]

Will be resolved by #22431.

[laiseng]

Will be resolved by #22431.

#22431 has been close because it failed circle ci gate keeper.
I've created a new cleaner PR to fix this at #22458

[crisbeto]

Closing since the PR was merged.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}