From 3e35351df507a4239513d374eb355afd3ca836cf Mon Sep 17 00:00:00 2001
From: Marmotz <contact@marmotz.dev>
Date: Fri, 31 Jul 2026 18:45:41 +0200
Subject: [PATCH] fix(treeselect): emit onFilter when the user types in the
 filter input

Closes #256
---
 .../src/treeselect/treeselect.spec.ts         | 28 +++++++++++++++++++
 .../optimus-ui/src/treeselect/treeselect.ts   | 12 ++++----
 2 files changed, 33 insertions(+), 7 deletions(-)

diff --git a/packages/optimus-ui/src/treeselect/treeselect.spec.ts b/packages/optimus-ui/src/treeselect/treeselect.spec.ts
index 3ec8af39a2..086fb561ca 100644
--- a/packages/optimus-ui/src/treeselect/treeselect.spec.ts
+++ b/packages/optimus-ui/src/treeselect/treeselect.spec.ts
@@ -1294,6 +1294,34 @@ describe('TreeSelect', () => {
             expect(treeSelectInstance.filterMode).toBe('lenient');
         });
 
+        it('should emit onFilter and update filteredNodes when the user types in the filter input', async () => {
+            testComponent.filter = true;
+            testComponent.filterBy = 'label';
+            testComponent.filterMode = 'lenient';
+            testFixture.changeDetectorRef.markForCheck();
+            await testFixture.whenStable();
+            testFixture.detectChanges();
+
+            const dropdown = testFixture.debugElement.query(By.css('.p-treeselect-dropdown'));
+            dropdown.nativeElement.dispatchEvent(new MouseEvent('mousedown', { bubbles: true }));
+            testFixture.detectChanges();
+            await testFixture.whenStable();
+            testFixture.detectChanges();
+
+            const filterInput = testFixture.debugElement.query(By.css('input[type="search"]'));
+            filterInput.nativeElement.value = 'Work';
+            filterInput.nativeElement.dispatchEvent(new Event('input'));
+            testFixture.detectChanges();
+            await testFixture.whenStable();
+
+            expect(testComponent.filterEvent).not.toBeNull();
+            expect(testComponent.filterEvent.filter).toBe('Work');
+
+            const treeSelectInstance = testFixture.debugElement.query(By.directive(TreeSelect)).componentInstance;
+            expect(treeSelectInstance.filterValue).toBe('Work');
+            expect(treeSelectInstance.filteredNodes).toEqual(testComponent.filterEvent.filteredValue);
+        });
+
         it('should handle empty state properly', async () => {
             testComponent.options = [];
             testComponent.emptyMessage = 'No nodes available';
diff --git a/packages/optimus-ui/src/treeselect/treeselect.ts b/packages/optimus-ui/src/treeselect/treeselect.ts
index 46edeb2d1e..71e01c38c9 100755
--- a/packages/optimus-ui/src/treeselect/treeselect.ts
+++ b/packages/optimus-ui/src/treeselect/treeselect.ts
@@ -165,6 +165,7 @@ const TREESELECT_INSTANCE = new InjectionToken<TreeSelect>('TREESELECT_INSTANCE'
                             [filterPlaceholder]="filterPlaceholder"
                             [filterLocale]="filterLocale"
                             [filteredNodes]="filteredNodes"
+                            (onFilter)="onFilterInput($event)"
                             [virtualScroll]="virtualScroll"
                             [virtualScrollItemSize]="virtualScrollItemSize"
                             [virtualScrollOptions]="virtualScrollOptions"
@@ -820,13 +821,10 @@ export class TreeSelect extends BaseEditableHolder<TreeSelectPassThrough> {
         }
     }
 
-    onFilterInput(event: Event) {
-        this.filterValue = (event.target as HTMLInputElement).value;
-        this.treeViewChild?._filter(this.filterValue);
-        this.onFilter.emit({
-            filter: this.filterValue,
-            filteredValue: this.treeViewChild?.filteredNodes
-        });
+    onFilterInput(event: TreeFilterEvent) {
+        this.filterValue = event.filter;
+        this.filteredNodes = event.filteredValue;
+        this.onFilter.emit(event);
         setTimeout(() => {
             this.overlayViewChild?.alignOverlay();
         });