fix(simple-combo): prevent group header selection on Enter key press - 17.2.x (#14432)

Author: georgianastasov

CHANGELOG.md

@@ -29,6 +29,7 @@ All notable changes for each version of this project will be documented in this
 - `IgxSimpleCombo`
     - **Behavioral Change** When bound to `ngModel` and `formControlName` directives, the model would not be updated when the user types into the input and will only be updated on selection.
     - **Behavioral Change** The `selectionChanging` event will now trigger when typing the first character in the input if there is a previously selected value in the `IgxSimpleCombo`.
+    - **Behavioral Change** Updated behavior to maintain the entered text in the input field upon pressing Enter while the combo input is focused, ensuring uninterrupted focus for continuous filtering. Additionally, the dropdown menu now remains open to display filtered results.
 
 
 ## 17.1.0

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

@@ -128,6 +128,7 @@ export class IgxComboDropDownComponent extends IgxDropDownComponent implements I
     public override navigatePrev() {
         if (this._focusedItem && this._focusedItem.index === 0 && this.virtDir.state.startIndex === 0) {
             this.combo.focusSearchInput(false);
+            this.focusedItem = null;
         } else {
             super.navigatePrev();
         }

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

@@ -1734,6 +1734,36 @@ describe('IgxSimpleCombo', () => {
             expect(combo.filteredData.length).toEqual(1);
             expect(combo.filteredData[0].field).toEqual('Arizona');
         }));
+
+        it('should not select the first item when combo is focused there is no focus item and Enter is pressed', fakeAsync(() => {
+            combo.open();
+            tick();
+            fixture.detectChanges();
+
+            UIInteractions.simulateTyping('ariz', input);
+            tick();
+            fixture.detectChanges();
+
+            expect(combo.dropdown.collapsed).toBe(false);
+
+            UIInteractions.triggerKeyDownEvtUponElem('ArrowDown', input.nativeElement);
+            tick();
+            fixture.detectChanges();
+
+            input.nativeElement.focus();
+            tick();
+            fixture.detectChanges();
+
+            combo.dropdown.focusedItem = undefined;
+            tick();
+            fixture.detectChanges();
+
+            UIInteractions.triggerKeyDownEvtUponElem('Enter', input.nativeElement);
+            tick();
+            fixture.detectChanges();
+
+            expect(combo.comboInput.value).toEqual('ariz');
+        }));
     });
 
     describe('Display density', () => {

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

@@ -331,10 +331,17 @@ export class IgxSimpleComboComponent extends IgxComboBaseDirective implements Co
                 return;
             }
             if (!this.dropdown.collapsed) {
-                this.select(this.dropdown.focusedItem.itemID);
-                event.preventDefault();
-                event.stopPropagation();
-                this.close();
+                const focusedItem = this.dropdown.focusedItem;
+                if (focusedItem && !focusedItem.isHeader) {
+                    this.select(focusedItem.itemID);
+                    event.preventDefault();
+                    event.stopPropagation();
+                    this.close();
+                } else {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    this.comboInput.focus();
+                }
             }
             // manually trigger text selection as it will not be triggered during editing
             this.textSelection.trigger();