diff --git a/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.html b/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.html
index 015269c17..b09491683 100644
--- a/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.html
+++ b/src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.html
@@ -20,7 +20,7 @@
         </div>
       </div>
       <div *ngIf="selectionModel.items" class="items">
-        <ng-container *ngFor="let item of selectionModel.items | filter: filterText">
+        <ng-container *ngFor="let item of selectionModel.itemsSorted | filter: filterText">
           <app-toggleable-dropdown-button *ngIf="allowSelectNone || item.id" [item]="item" [state]="selectionModel.get(item.id)" (toggle)="selectionModel.toggle(item.id)"></app-toggleable-dropdown-button>
         </ng-container>
       </div>
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 e1aa6a06a..b51923c27 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
@@ -18,6 +18,18 @@ export class FilterableDropdownSelectionModel {
 
   items: MatchingModel[] = []
 
+  get itemsSorted(): MatchingModel[] {
+    return this.items.sort((a,b) => {
+      if (this.getNonTemporary(a.id) == ToggleableItemState.NotSelected && this.getNonTemporary(b.id) != ToggleableItemState.NotSelected) {
+        return 1
+      } else if (this.getNonTemporary(a.id) != ToggleableItemState.NotSelected && this.getNonTemporary(b.id) == ToggleableItemState.NotSelected) {
+        return -1
+      } else {
+        return a.name.localeCompare(b.name)
+      }
+    })
+  }
+
   private selectionStates = new Map<number, ToggleableItemState>()
 
   private temporarySelectionStates = new Map<number, ToggleableItemState>()
@@ -69,6 +81,10 @@ export class FilterableDropdownSelectionModel {
     
   }
 
+  private getNonTemporary(id: number) {
+    return this.selectionStates.get(id) || ToggleableItemState.NotSelected
+  }
+
   get(id: number) {
     return this.temporarySelectionStates.get(id) || ToggleableItemState.NotSelected
   }