From aad70575b71c58f1c64b5e461876d84d8d17cd58 Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Fri, 13 Nov 2026 10:10:06 -0800
Subject: [PATCH] Tweak/fix: auto-close CF dropdown

---
 .../custom-fields-dropdown.component.spec.ts          | 11 +++++++++++
 .../custom-fields-dropdown.component.ts               |  8 +++++++-
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/src-ui/src/app/components/common/custom-fields-dropdown/custom-fields-dropdown.component.spec.ts b/src-ui/src/app/components/common/custom-fields-dropdown/custom-fields-dropdown.component.spec.ts
index 57fcd798e0..ede2e7507a 100644
--- a/src-ui/src/app/components/common/custom-fields-dropdown/custom-fields-dropdown.component.spec.ts
+++ b/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)
+  })
 })
diff --git a/src-ui/src/app/components/common/custom-fields-dropdown/custom-fields-dropdown.component.ts b/src-ui/src/app/components/common/custom-fields-dropdown/custom-fields-dropdown.component.ts
index d822bb373e..ee863d1f5c 100644
--- a/src-ui/src/app/components/common/custom-fields-dropdown/custom-fields-dropdown.component.ts
+++ b/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()
   }