I have this issue for quite some time and can't figure it out and wanted to ask if it's possible to help. Somehow the position of the 'drop area' of the cdkDropList does not update when I animate it.
Create a cdkDropList <div> which acts as a container (let's call the cdkDropList <div> Bin) in which I drop cdkDrag elements from another list (let's call the cdkDrag elements Item).
The Bin should fly in when Item is picked up and fly out when Item is dropped (no matter if it's back into the original cdkDropList or Bin).
The animation works fine, but when I drag Item into the Bin, the Bin isn't recognized. What I mean by 'not recognized' is that the cdkDropListDropped function of Bin is not triggered.
This problem only occurs when I do the animation by picking up and dropping Item. I also tried to animate the Bin with a button which I click to let the bin appear/disappear and that works fine (but it's not the way I want to implement it).
https://stackblitz.com/edit/angular-cvbare?file=src%2Fapp%2Fapp.component.html
In this Stackblitz example I recreated the thing that's not working since posting my code would be too much and hard to understand without context.
Note: In the console of the example you will see Dropped something when Item is dropped into the Bin. When Item is dropped back or anywhere outside the bin it will print Dropped back in the console.
Using...
...CSS animations instead of Angular
...ChangeDetectorRef
...Timeout
I'm really stuck and don't know how to resolve this issue and would appreciate any kind of advise or help.
Seems like this is a bug and is currently not resolved yet. Just found these tickets on Github related to this bug:
I guess I just have to wait for a fix.