From 440049978b7a5d6c34e14b910626d8d9eaef86bc Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Mon, 31 Aug 2026 09:09:10 -0700
Subject: [PATCH] Fix: add disable to the drag-drop list component (#13880)

---
 .../drag-drop-select.component.html           |  2 ++
 .../drag-drop-select.component.scss           |  8 ++++++
 .../drag-drop-select.component.spec.ts        | 25 +++++++++++++++++++
 .../drag-drop-select.component.ts             |  2 ++
 4 files changed, 37 insertions(+)

diff --git a/src-ui/src/app/components/common/input/drag-drop-select/drag-drop-select.component.html b/src-ui/src/app/components/common/input/drag-drop-select/drag-drop-select.component.html
index a04286465..36455ccb8 100644
--- a/src-ui/src/app/components/common/input/drag-drop-select/drag-drop-select.component.html
+++ b/src-ui/src/app/components/common/input/drag-drop-select/drag-drop-select.component.html
@@ -3,6 +3,7 @@
     <div class="d-flex flex-wrap flex-row gap-2 w-100 mh-1" style="min-height: 1em;"
         cdkDropList #selectedList="cdkDropList"
         cdkDropListOrientation="mixed"
+        [cdkDropListDisabled]="disabled"
         (cdkDropListDropped)="drop($event)"
         [cdkDropListConnectedTo]="[unselectedList]">
         @for (item of selectedItems; track item.id) {
@@ -17,6 +18,7 @@
     <div class="d-flex flex-wrap flex-row gap-2 w-100" style="min-height: 1em;"
         cdkDropList #unselectedList="cdkDropList"
         cdkDropListOrientation="mixed"
+        [cdkDropListDisabled]="disabled"
         (cdkDropListDropped)="drop($event)"
         [cdkDropListConnectedTo]="[selectedList]">
         @for (item of unselectedItems; track item.id) {
diff --git a/src-ui/src/app/components/common/input/drag-drop-select/drag-drop-select.component.scss b/src-ui/src/app/components/common/input/drag-drop-select/drag-drop-select.component.scss
index 483c6c592..96fa24632 100644
--- a/src-ui/src/app/components/common/input/drag-drop-select/drag-drop-select.component.scss
+++ b/src-ui/src/app/components/common/input/drag-drop-select/drag-drop-select.component.scss
@@ -1,3 +1,11 @@
 .badge {
     cursor: move;
 }
+
+.cdk-drop-list-disabled {
+    cursor: not-allowed !important;
+
+    * {
+      pointer-events: none !important;
+    }
+}
diff --git a/src-ui/src/app/components/common/input/drag-drop-select/drag-drop-select.component.spec.ts b/src-ui/src/app/components/common/input/drag-drop-select/drag-drop-select.component.spec.ts
index 9f30fc44a..82bf274d6 100644
--- a/src-ui/src/app/components/common/input/drag-drop-select/drag-drop-select.component.spec.ts
+++ b/src-ui/src/app/components/common/input/drag-drop-select/drag-drop-select.component.spec.ts
@@ -98,4 +98,29 @@ describe('DragDropSelectComponent', () => {
       { id: '3', name: 'Item 3' },
     ])
   })
+
+  it('should disable drag and drop when the control is disabled', () => {
+    component.items = [
+      { id: '1', name: 'Item 1' },
+      { id: '2', name: 'Item 2' },
+    ]
+    component.writeValue(['1', '2'])
+    component.setDisabledState(true)
+    fixture.detectChanges()
+
+    expect(component.selectedList.disabled).toBe(true)
+    expect(component.unselectedList.disabled).toBe(true)
+
+    component.drop({
+      previousContainer: component.selectedList,
+      container: component.selectedList,
+      previousIndex: 0,
+      currentIndex: 1,
+    } as any)
+
+    expect(component.selectedItems).toEqual([
+      { id: '1', name: 'Item 1' },
+      { id: '2', name: 'Item 2' },
+    ])
+  })
 })
diff --git a/src-ui/src/app/components/common/input/drag-drop-select/drag-drop-select.component.ts b/src-ui/src/app/components/common/input/drag-drop-select/drag-drop-select.component.ts
index a27100a68..08a779181 100644
--- a/src-ui/src/app/components/common/input/drag-drop-select/drag-drop-select.component.ts
+++ b/src-ui/src/app/components/common/input/drag-drop-select/drag-drop-select.component.ts
@@ -46,6 +46,8 @@ export class DragDropSelectComponent extends AbstractInputComponent<string[]> {
   }
 
   public drop(event: CdkDragDrop<string[]>) {
+    if (this.disabled) return
+
     if (
       event.previousContainer === event.container &&
       event.container === this.selectedList