Prevent apply on close for extra button

src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.html

@@ -67,7 +67,7 @@
         }
       }
       @if (extraButtonTitle) {
-        <button class="list-group-item list-group-item-action bg-light text-primary" (click)="extraButton.next($event)" [disabled]="disabled">
+        <button class="list-group-item list-group-item-action bg-light text-primary" (click)="extraButtonClicked($event)" [disabled]="disabled">
           <small class="ms-2 fw-bold"><ng-container i18n>{{extraButtonTitle}}</ng-container></small>
         </button>
       }

src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.spec.ts

@@ -616,4 +616,24 @@ describe('FilterableDropdownComponent & FilterableDropdownSelectionModel', () =>
     document.dispatchEvent(new KeyboardEvent('keydown', { key: 't' }))
     expect(openSpy).toHaveBeenCalled()
   })
+
+  it('should support an extra button and not apply changes when clicked', () => {
+    component.items = items
+    component.icon = 'tag-fill'
+    component.extraButtonTitle = 'Extra'
+    component.selectionModel = selectionModel
+    component.applyOnClose = true
+    let extraButtonClicked,
+      applied = false
+    component.extraButton.subscribe(() => (extraButtonClicked = true))
+    component.apply.subscribe(() => (applied = true))
+    fixture.nativeElement
+      .querySelector('button')
+      .dispatchEvent(new MouseEvent('click')) // open
+    fixture.detectChanges()
+    expect(fixture.debugElement.nativeElement.textContent).toContain('Extra')
+    component.extraButtonClicked()
+    expect(extraButtonClicked).toBeTruthy()
+    expect(applied).toBeFalsy()
+  })
 })

src-ui/src/app/components/common/filterable-dropdown/filterable-dropdown.component.ts

@@ -650,4 +650,13 @@ export class FilterableDropdownComponent implements OnDestroy, OnInit {
       this.selectionModel.get(item.id) !== ToggleableItemState.Selected
     )
   }
+
+  extraButtonClicked() {
+    // don't apply changes when clicking the extra button
+    const applyOnClose = this.applyOnClose
+    this.applyOnClose = false
+    this.dropdown.close()
+    this.extraButton.emit()
+    this.applyOnClose = applyOnClose
+  }
 }