From 7a50157164cf710b57f20e58be5c730f0c52727b Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Tue, 18 Nov 2025 07:57:09 -0800
Subject: [PATCH] Fix: sort editing filterable dropdowns sooner (#11404)

---
 .../filterable-dropdown.component.spec.ts     | 41 +++++++++++++++++++
 .../filterable-dropdown.component.ts          | 23 ++++++++++-
 2 files changed, 62 insertions(+), 2 deletions(-)

diff --git a/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.spec.ts b/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.spec.ts
index 5b643dc9f..2ecf95f2b 100644
--- a/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.spec.ts
+++ b/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.spec.ts
@@ -631,6 +631,47 @@ describe('FilterableDropdownComponent & FilterableDropdownSelectionModel', () =>
     ])
   })
 
+  it('resorts items immediately when document count sorting enabled', () => {
+    const apple: Tag = { id: 55, name: 'Apple' }
+    const zebra: Tag = { id: 56, name: 'Zebra' }
+
+    selectionModel.documentCountSortingEnabled = true
+    selectionModel.items = [apple, zebra]
+    expect(selectionModel.items.map((item) => item?.id ?? null)).toEqual([
+      null,
+      apple.id,
+      zebra.id,
+    ])
+
+    selectionModel.documentCounts = [
+      { id: zebra.id, document_count: 5 },
+      { id: apple.id, document_count: 0 },
+    ]
+
+    expect(selectionModel.items.map((item) => item?.id ?? null)).toEqual([
+      null,
+      zebra.id,
+      apple.id,
+    ])
+  })
+
+  it('does not resort items by default when document counts are set', () => {
+    const first: Tag = { id: 57, name: 'First' }
+    const second: Tag = { id: 58, name: 'Second' }
+
+    selectionModel.items = [first, second]
+    selectionModel.documentCounts = [
+      { id: second.id, document_count: 10 },
+      { id: first.id, document_count: 0 },
+    ]
+
+    expect(selectionModel.items.map((item) => item?.id ?? null)).toEqual([
+      null,
+      first.id,
+      second.id,
+    ])
+  })
+
   it('uses fallback document counts when selection data is missing', () => {
     const fallbackRoot: Tag = {
       id: 50,
diff --git a/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.ts b/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.ts
index 1e15930d1..ec5425630 100644
--- a/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.ts
+++ b/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.ts
@@ -61,8 +61,13 @@ export class FilterableDropdownSelectionModel {
   temporaryIntersection: Intersection = this._intersection
 
   private _documentCounts: SelectionDataItem[] = []
+  public documentCountSortingEnabled = false
+
   public set documentCounts(counts: SelectionDataItem[]) {
     this._documentCounts = counts
+    if (this.documentCountSortingEnabled) {
+      this.sortItems()
+    }
   }
 
   private _items: MatchingModel[] = []
@@ -651,8 +656,9 @@ export class FilterableDropdownComponent
       this.selectionModel.changed.complete()
       model.items = this.selectionModel.items
       model.manyToOne = this.selectionModel.manyToOne
-      model.singleSelect = this.editing && !this.selectionModel.manyToOne
+      model.singleSelect = this._editing && !model.manyToOne
     }
+    model.documentCountSortingEnabled = this._editing
     model.changed.subscribe((updatedModel) => {
       this.selectionModelChange.next(updatedModel)
     })
@@ -682,8 +688,21 @@ export class FilterableDropdownComponent
   @Input()
   allowSelectNone: boolean = false
 
+  private _editing = false
+
   @Input()
-  editing = false
+  set editing(value: boolean) {
+    this._editing = value
+    if (this.selectionModel) {
+      this.selectionModel.singleSelect =
+        this._editing && !this.selectionModel.manyToOne
+      this.selectionModel.documentCountSortingEnabled = this._editing
+    }
+  }
+
+  get editing() {
+    return this._editing
+  }
 
   @Input()
   applyOnClose = false