Angular CDK Drag and Drop with Nested Arrays: previousIndex Always 0 When Dragging to Top, Works Correctly When Dragging to Bottom

Question

I'm working with Angular CDK's Drag and Drop on nested arrays and encountering an issue with sorting the items. Specifically, when I drag an item to the top of a list, the previousIndex provided by the CdkDragDrop event is always 0, which is incorrect. However, dragging an item to the bottom of the list updates the previousIndex correctly. This issue occurs in a nested drag-and-drop setup, and I'm not sure why the behavior differs based on the drop position.

I've checked that cdkDrag and cdkDropList directives are correctly applied. Ensured that cdkDropListData is properly bound to the nested array. Logged the event object to inspect previousIndex and currentIndex values. Despite these checks, dragging to the top of the list always results in previousIndex being 0. Dragging to the bottom, however, gives the correct previousIndex.

Expected Behavior: The previousIndex should accurately reflect the original position of the dragged item, regardless of whether it's dragged to the top or bottom of the list.

Actual Behavior: previousIndex is always 0 when dragging to the top but correct when dragging to the bottom.

Any insights or suggestions to resolve this issue would be greatly appreciated!

<div *ngIf="item">
    <div cdkDropList class="item-dropzone parent" [id]="parentItemId"
        [cdkDropListData]="parentItem" [cdkDropListConnectedTo]="allDropListsIds">

        <div cdkDrag [id]="item.uId" [cdkDragData]="item" [cdkDragDisabled]="dragDisabled 
            || item.folderName === 'Global Predefined Searches' && !isGlobalUser" class="drag-item">
                
            <div title="Drag this item with children" class="item-drag-handle" cdkDragHandle
                [ngClass]="{'expanded': item.expanded,'collapsed': !item.expanded}">

                <i *ngIf="!dragDisabled && item.folderName !== 'Global Predefined Searches' && !isGlobalUser
                || !dragDisabled && item.folderName === 'Global Predefined Searches' && isGlobalUser 
                || !dragDisabled && item.folderName === 'Saved Searches' && isGlobalUser" class="material-icons">
                    drag_indicator
                </i>

                <mat-icon cdkDrag *ngIf="item.expanded && item.nested" aria-hidden="false"
                    (click)="toggleHeight(item.uId, item.expanded)" aria-label="expanded" aria-describedby="expanded"
                    aria-labelledby="expanded" class="material-icons-outlined saved__indeterminate ">
                    indeterminate_check_box
                </mat-icon>

                <span *ngIf="!item.expanded && item.nested" aria-hidden="false" aria-label="expand"
                    (click)="toggleHeight(item.uId, item.expanded)" aria-describedby="expand" aria-labelledby="expand"
                    class="material-icons-outlined">
                    add_box
                </span>

                <mat-icon
                    *ngIf="item.folderName === 'Global Predefined Searches' && isGlobalUser || item.folderName === 'Saved Searches'"
                    (click)="editFolderName($event, item.name, item.uId, item.name, item)" aria-hidden="false"
                    aria-label="edit folder name" aria-describedby="edit folder name"
                    aria-labelledby="band-button-2 band-text-2" class="search">
                    search
                </mat-icon>

                <span *ngIf="item.nested" aria-hidden="false" aria-label="folder" aria-describedby="folder"
                    aria-labelledby="folder" class="material-icons-outlined folder">
                    folder
                </span>

                <div (click)="searchToEdit($event, item, item.nested)" class="search-btn" [ngClass]="{ 'search-btn__selected' : item.isSelected && item.folderName !== 'Global Predefined Searches' || isGlobalUser && item.isSelected && item.folderName === 'Global Predefined Searches',
                     'search-btn__clickable' : !item.nested}">
                    {{item.name}}
                </div>

            </div>

            <div class="item-drag-preview" *cdkDragPreview>
                {{item.name}}
            </div>

        </div>

        <ul cdkDropList class="item-dropzone" [id]="item.uId" [cdkDropListConnectedTo]="connectedDropListsIds"
            [cdkDropListData]="item" (cdkDropListDropped)="onDragDrop($event)" class="children"
            [ngClass]="{'notNested': !item.nested}">

            <ng-container *ngFor="let subItem of item.groups; let i= index">
                <div cdkDrag [ngClass]="{'expanded': item.expanded,'collapsed': !item.expanded}">
                    <div [ngClass]="{'notNestedPadding': !item.nested}">
                        <app-saved-searches-list [item]="subItem" [parentItem]="item" class="subItem"
                            [connectedDropListsIds]="allDropListsIds" (itemDrop)="onDragDrop($event)">
                        </app-saved-searches-list>
                    </div>
                </div>
            </ng-container>

        </ul>
    </div>
</div>