fix(cdk/drag-drop): avoid retaining destroyed items until next drag (#…

…30514)

We have some logic that registers and de-registers the items on create/destroy. That logic only syncs the item with the internal `DragRef` once the next dragging starts which means that we might retain a destroyed item if another drag doesn't start.

These changes switch to always syncing the list when an item is removed.

I've also added some context around why things are set up as they are right now since it took a while to remember the reasoning.

Fixes #30506.

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

@@ -219,6 +219,8 @@ export class CdkDropList<T = any> implements OnDestroy {
   addItem(item: CdkDrag): void {
     this._unsortedItems.add(item);
 
+    // Only sync the items while dragging since this method is
+    // called when items are being initialized one-by-one.
     if (this._dropListRef.isDragging()) {
       this._syncItemsWithRef();
     }
@@ -228,9 +230,8 @@ export class CdkDropList<T = any> implements OnDestroy {
   removeItem(item: CdkDrag): void {
     this._unsortedItems.delete(item);
 
-    if (this._dropListRef.isDragging()) {
-      this._syncItemsWithRef();
-    }
+    // This method might be called on destroy so we always want to sync with the ref.
+    this._syncItemsWithRef();
   }
 
   /** Gets the registered items in the list, sorted by their position in the DOM. */