I’m encountering an issue with Angular’s CDK Drag and Drop functionality. I have a component that uses a bottom sheet to display ‘user cards’ in lists, and it allows dragging and dropping users between these lists. The drag-and-drop feature works perfectly the first time I open the bottom sheet.
However, if I dismiss the bottom sheet and then reopen it, dragging a user from one list to another no longer works. Sorting within the same list still works, but moving items between lists fails.

Here is the relevant code:

connectedLists(): string[] {
    return this.filteredUsers.map((_, i) => `cdk-drop-list-${i}`);
  }

  handleDrop(event: CdkDragDrop<UserCardData[]>): void {
    if (event.previousContainer !== event.container) {
      const prevIndex = this.filteredUsers.findIndex(team => team.users === event.previousContainer.data);
      const currIndex = this.filteredUsers.findIndex(team => team.users === event.container.data);
  
      if (prevIndex > -1 && currIndex > -1) {
        transferArrayItem(
          this.filteredUsers[prevIndex].users,
          this.filteredUsers[currIndex].users,
          event.previousIndex,
          event.currentIndex
        );
      }
    } else {
      moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
    }
    this.highlightedListIndex = null;
  }

  handleDragEnter(event: CdkDragEnter<UserCardData[]>): void {
    const index = this.filteredUsers.findIndex(team => team.users === event.container.data);
    this.highlightedListIndex = index;

  }
  
  handleDragLeave(event: CdkDragExit<UserCardData[]>): void {
    this.highlightedListIndex = null;

  }

  cdkDragStarted(event: CdkDragStart): void {
    event.source.element.nativeElement.classList.add('dragging');

  }

  cdkDragEnded(event: CdkDragEnd): void {
    event.source.element.nativeElement.classList.remove('dragging');

  }

Component HTML Template

<div class="content relocate" cdkScrollable>
          <div *ngFor="let team of filteredUsers; let i = index" cdkDropListGroup>
            <div class="team-header">
              <h2>{{ team.teamName }}</h2>
              <span class="divider"></span>
              <i class="fas fa-chevron-down chevron" [ngClass]="{'collapsed': team.collapsed}" (click)="toggleCollapse(team)"></i>
            </div>
          
            <div [@collapseExpand]="team.collapsed ? 'collapsed' : 'expanded'" cdkDropList
                 [cdkDropListData]="team.users" 
                 [cdkDropListConnectedTo]="connectedLists()" class="drag-drop-list"
                 [ngClass]="{'highlight': highlightedListIndex === i}"
                 [cdkDropListAutoScrollStep]="10"
                 (cdkDropListEntered)="handleDragEnter($event)" 
                 (cdkDropListExited)="handleDragLeave($event)"
                 (cdkDropListDropped)="handleDrop($event)">
              <div *ngFor="let user of team.users" cdkDrag class="drag-drop-item">
                <app-user-card [userCardData]="user"></app-user-card>
                <div cdkDragHandle class="drag-handle">
                  <i class="fa-solid fa-grip-lines"></i>
                </div>
                <div *cdkDragPlaceholder>
                  <app-user-card [userCardData]="user" class="cdk-drag-placeholder"></app-user-card>
                </div>
              </div>
            </div>
          </div>
        </div>

What I’ve Tried:

1. Destroying and reinitializing all relevant component state and
   instances (Swiper, drag-and-drop lists, and connected lists).
2. Forcing Angular change detection after reinitializing the
   drag-and-drop lists.
3. Added logging to understand the state and flow of the
   initialization process.

Issue:

The drag-and-drop functionality works perfectly the first time the bottom sheet is opened.
Upon dismissing and reopening the bottom sheet, dragging users between lists no longer works, though sorting within the same list still functions.

Help Needed:

Any insights or suggestions on what might be causing the drag-and-drop functionality to fail after reopening the bottom sheet?
Is there a more effective way to reinitialize the drag-and-drop lists or manage their state?