Tweak/fix: auto-close CF dropdown

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

@@ -4,6 +4,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
 import { By } from '@angular/platform-browser'
 import {
+  NgbDropdown,
   NgbDropdownModule,
   NgbModal,
   NgbModalModule,
@@ -250,4 +251,14 @@ describe('CustomFieldsDropdownComponent', () => {
     expect(createFieldSpy).not.toHaveBeenCalled()
     expect(addFieldSpy).not.toHaveBeenCalled()
   })
+
+  it('should close the dropdown after selecting a filtered field', () => {
+    const dropdown = fixture.debugElement
+      .query(By.directive(NgbDropdown))
+      .injector.get(NgbDropdown)
+    dropdown.open()
+    component.filterText = 'Field 1'
+    component.listFilterEnter()
+    expect(dropdown.isOpen()).toBe(false)
+  })
 })

src-ui/src/app/components/common/custom-fields-dropdown/custom-fields-dropdown.component.ts

@@ -11,7 +11,11 @@ import {
   signal,
 } from '@angular/core'
 import { FormsModule, ReactiveFormsModule } from '@angular/forms'
-import { NgbDropdownModule, NgbModal } from '@ng-bootstrap/ng-bootstrap'
+import {
+  NgbDropdown,
+  NgbDropdownModule,
+  NgbModal,
+} from '@ng-bootstrap/ng-bootstrap'
 import { first, takeUntil } from 'rxjs'
 import { BootstrapIconComponent } from 'src/app/components/common/bootstrap-icon/bootstrap-icon.component'
 import { CustomField, DATA_TYPE_LABELS } from 'src/app/data/custom-field'
@@ -63,6 +67,7 @@ export class CustomFieldsDropdownComponent extends LoadingComponentWithPermissio
   created: EventEmitter<CustomField> = new EventEmitter()
 
   @ViewChild('listFilterTextInput') listFilterTextInput: ElementRef
+  @ViewChild('fieldDropdown') fieldDropdown: NgbDropdown
   @ViewChildren('button') buttons: QueryList<ElementRef>
 
   private customFields: CustomField[] = []
@@ -120,6 +125,7 @@ export class CustomFieldsDropdownComponent extends LoadingComponentWithPermissio
 
   addField(field: CustomField) {
     this.added.emit(field)
+    this.fieldDropdown.close()
     this.updateUnusedFields()
   }