#3624 - Fix Multi-Row Drag-and-Drop Issue for Chips in Item Submission Form

src/app/shared/form/chips/chips.component.html

@@ -1,14 +1,18 @@
 <div [className]="'float-left w-100 ' + wrapperClass">
-  <div role="list" class="nav nav-pills d-flex flex-column flex-sm-row" cdkDropList cdkDropListOrientation="horizontal" (cdkDropListDropped)="onDrop($event)">
+  <div role="list" class="nav nav-pills d-flex flex-column flex-sm-row" cdkDropListGroup>
     <ng-template #tipContent>
       <p class="text-left p-0 m-0" *ngFor="let tip of tipText">
         {{tip}}
       </p>
     </ng-template>
-    <div role="listitem" class="nav-item mr-2 mb-1"
+    <div role="listitem" class="nav-item mr-2 mb-1 d-flex flex-row"
            *ngFor="let c of chips.getChips(); let i = index"
            #t="ngbTooltip"
            triggers="manual"
+           cdkDropList
+           [cdkDropListData]="{ index: i }"
+           cdkDropListOrientation="horizontal"
+           (cdkDropListDropped)="onDrop($event)"
            [ngbTooltip]="tipContent"
            (mouseover)="showTooltip(t, i)"
            (mouseout)="t.close()">

src/app/shared/form/chips/chips.component.scss

@@ -1,7 +1,8 @@
 .cdk-drag-placeholder {
   filter: grayscale(100%);
-  transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
+  margin: 0 0.25rem;
 }
+
 .cdk-drag-preview {
   color: white;
   box-sizing: border-box;

src/app/shared/form/chips/chips.component.spec.ts

@@ -143,9 +143,9 @@ describe('ChipsComponent test suite', () => {
 
     it('should update chips item order when drag and drop end', fakeAsync(() => {
       spyOn(chipsComp.chips, 'updateOrder');
-      const de = chipsFixture.debugElement.query(By.css('div[role="list"]'));
+      const de = chipsFixture.debugElement.query(By.css('div[role="listitem"]'));
 
-      de.triggerEventHandler('cdkDropListDropped', { previousIndex: 0, currentIndex: 1 });
+      de.triggerEventHandler('cdkDropListDropped', { previousIndex: 0, currentIndex: 1, previousContainer: { data: { index: 0 } }, container: { data: { index: 1 } } });
 
       expect(chipsComp.dragged).toBe(-1);
       expect(chipsComp.chips.updateOrder).toHaveBeenCalled();

src/app/shared/form/chips/chips.component.ts

@@ -2,6 +2,7 @@ import {
   CdkDrag,
   CdkDragDrop,
   CdkDropList,
+  CdkDropListGroup,
   moveItemInArray,
 } from '@angular/cdk/drag-drop';
 import {
@@ -48,6 +49,7 @@ import { ChipsItem } from './models/chips-item.model';
     TranslateModule,
     CdkDrag,
     CdkDropList,
+    CdkDropListGroup,
   ],
   standalone: true,
 })
@@ -105,8 +107,17 @@ export class ChipsComponent implements OnChanges {
     this.dragged = index;
   }
 
-  onDrop(event: CdkDragDrop<ChipsItem[]>) {
-    moveItemInArray(this.chips.chipsItems.getValue(), event.previousIndex, event.currentIndex);
+  onDrop(event: CdkDragDrop<{ index: number }>) {
+    const previousContainerIndex = event.previousContainer.data.index;
+    const currentContainerIndex = event.container.data.index;
+
+    const currentPositionInCurrentContainer = event.currentIndex;
+
+    const directionAdjuster = currentContainerIndex > previousContainerIndex ? -1 : 0;
+
+    moveItemInArray(this.chips.chipsItems.getValue(),
+      previousContainerIndex,
+      currentContainerIndex + currentPositionInCurrentContainer + directionAdjuster);
     this.dragged = -1;
     this.chips.updateOrder();
     this.isDragging.next(false);