Merge pull request #14209 from IgniteUI/ganastasov/fix-14187-17.2.x

fix(simple-combo): filter on typing when combo is focused but not opened - 17.2.x

Author: kacheshmarova

projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.spec.ts

@@ -1686,6 +1686,52 @@ describe('IgxSimpleCombo', () => {
 
             expect(comboInput.nativeElement.value).toEqual('Connecticut');
         });
+
+        it('should properly filter dropdown when a key is pressed while the combo is focused but not opened, with no selected item', fakeAsync(() => {
+            expect(combo.collapsed).toEqual(true);
+
+            // filter with a specific character when there is no selected item
+            combo.handleInputChange('z');
+            tick();
+            fixture.detectChanges();
+
+            expect(combo.filteredData.length).toEqual(1);
+            expect(combo.filteredData[0].field).toEqual('Arizona');
+
+            combo.close();
+            tick();
+            fixture.detectChanges();
+
+            expect(combo.collapsed).toEqual(true);
+
+            // filter with ' '  when there is no selected item
+            combo.handleInputChange(' ');
+            tick();
+            fixture.detectChanges();
+
+            expect(combo.filteredData.length).toEqual(12);
+        }));
+
+        it('should properly filter dropdown when a key is pressed while the combo is focused but not opened, with a selected item', fakeAsync(() => {
+            // select an item
+            combo.select('Connecticut');
+            tick();
+            fixture.detectChanges();
+
+            expect(combo.selection.field).toEqual('Connecticut');
+
+            combo.close();
+            tick();
+            fixture.detectChanges();
+
+            // filter with a specific character when there is a selected item
+            combo.handleInputChange('z');
+            tick();
+            fixture.detectChanges();
+
+            expect(combo.filteredData.length).toEqual(1);
+            expect(combo.filteredData[0].field).toEqual('Arizona');
+        }));
     });
 
     describe('Display density', () => {

projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.ts

@@ -240,7 +240,6 @@ export class IgxSimpleComboComponent extends IgxComboBaseDirective implements Co
                 this.filterValue = this.searchValue = this.comboInput.value;
                 return;
             }
-            this.filterValue = this.searchValue = '';
         });
         this.dropdown.opened.pipe(takeUntil(this.destroy$)).subscribe(() => {
             if (this.composing) {
@@ -281,12 +280,12 @@ export class IgxSimpleComboComponent extends IgxComboBaseDirective implements Co
 
     /** @hidden @internal */
     public override handleInputChange(event?: any): void {
-        if (event !== undefined) {
-            this.filterValue = this.searchValue = typeof event === 'string' ? event : event.target.value;
-        }
         if (this.collapsed && this.comboInput.focused) {
             this.open();
         }
+        if (event !== undefined) {
+            this.filterValue = this.searchValue = typeof event === 'string' ? event : event.target.value;
+        }
         if (!this.comboInput.value.trim() && super.selection.length) {
             // handle clearing of input by space
             this.clearSelection();