Merge pull request #13609 from IgniteUI/sstoychev/combo-enter-issue-16.1

fix(simple-combo): only select with enter when dropdown is open - 16.1

Author: Lipata

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

@@ -17,7 +17,7 @@
         [attr.aria-expanded]="!this.dropdown.collapsed" [attr.aria-controls]="this.dropdown.listId"
         [attr.aria-labelledby]="this.ariaLabelledBy || this.label?.id || this.placeholder"
         [attr.placeholder]="placeholder" [disabled]="disabled" [igxTextSelection]="!composing"
-        (focus)="onFocus()" (input)="handleInputChange($event)" (click)="handleInputClick()"
+        (input)="handleInputChange($event)" (click)="handleInputClick()"
         (keyup)="handleKeyUp($event)" (keydown)="handleKeyDown($event)" (blur)="onBlur()"/>
 
     <ng-container ngProjectAs="igx-suffix">
@@ -62,7 +62,7 @@
         [tabindex]="dropdown.collapsed ? -1 : 0" [attr.id]="dropdown.id"
         [attr.aria-activedescendant]="this.activeDescendant"
         (focus)="dropdown.onFocus()" (keydown)="handleItemKeyDown($event)">
-        <igx-combo-item  [role]="item?.isHeader? 'group' : 'option'" [singleMode]="true"
+        <igx-combo-item [role]="item?.isHeader? 'group' : 'option'" [singleMode]="true"
             [itemHeight]="itemHeight" (click)="handleItemClick()" *igxFor="let item of data
                 | comboFiltering:filterValue:displayKey:filteringOptions:filterFunction
                 | comboGrouping:groupKey:valueKey:groupSortingDirection;

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

@@ -915,6 +915,7 @@ describe('IgxSimpleCombo', () => {
         });
 
         it('should not clear selection on tab/blur after filtering and selecting a value', () => {
+            combo.focusSearchInput();
             UIInteractions.simulateTyping('con', input);
             expect(combo.comboInput.value).toEqual('con');
             fixture.detectChanges();
@@ -1032,6 +1033,7 @@ describe('IgxSimpleCombo', () => {
         }));
 
         it('should select the first filtered item with Enter', () => {
+            combo.focusSearchInput();
             UIInteractions.simulateTyping('con', input);
             expect(combo.comboInput.value).toEqual('con');
             fixture.detectChanges();

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

@@ -94,9 +94,6 @@ export class IgxSimpleComboComponent extends IgxComboBaseDirective implements Co
 
     private _updateInput = true;
 
-    // stores the last filtered value - move to common?
-    private _internalFilter = '';
-
     private _collapsing = false;
 
     /** @hidden @internal */
@@ -185,9 +182,9 @@ export class IgxSimpleComboComponent extends IgxComboBaseDirective implements Co
         const oldSelection = this.selection;
         this.selectionService.select_items(this.id, this.isValid(value) ? [value] : [], true);
         this.cdr.markForCheck();
-        this._displayValue = this.createDisplayText(this.selection, oldSelection);
-        this._value = this.valueKey ? this.selection.map(item => item[this.valueKey]) : this.selection;
-        this.filterValue = this._internalFilter = this._displayValue?.toString();
+        this._displayValue = this.createDisplayText(super.selection, oldSelection);
+        this._value = this.valueKey ? super.selection.map(item => item[this.valueKey]) : super.selection;
+        this.filterValue = this._displayValue?.toString() || '';
     }
 
     /** @hidden @internal */
@@ -225,7 +222,6 @@ export class IgxSimpleComboComponent extends IgxComboBaseDirective implements Co
             if (this.composing) {
                 this.comboInput.focus();
             }
-            this._internalFilter = this.comboInput.value;
         });
         this.dropdown.closing.pipe(takeUntil(this.destroy$)).subscribe((args) => {
             if (args.cancel) {
@@ -239,9 +235,6 @@ export class IgxSimpleComboComponent extends IgxComboBaseDirective implements Co
             }
             this.comboInput.focus();
         });
-        this.dropdown.closed.pipe(takeUntil(this.destroy$)).subscribe(() => {
-            this.filterValue = this._internalFilter = this.comboInput.value;
-        });
 
         // in reactive form the control is not present initially
         // and sets the selection to an invalid value in writeValue method
@@ -265,7 +258,7 @@ export class IgxSimpleComboComponent extends IgxComboBaseDirective implements Co
     /** @hidden @internal */
     public override handleInputChange(event?: any): void {
         if (event !== undefined) {
-            this.filterValue = this._internalFilter = this.searchValue = typeof event === 'string' ? event : event.target.value;
+            this.filterValue = this.searchValue = typeof event === 'string' ? event : event.target.value;
         }
         this._onChangeCallback(this.searchValue);
         if (this.collapsed && this.comboInput.focused) {
@@ -309,7 +302,6 @@ export class IgxSimpleComboComponent extends IgxComboBaseDirective implements Co
             this.close();
             // manually trigger text selection as it will not be triggered during editing
             this.textSelection.trigger();
-            this.filterValue = this.getElementVal(filtered);
             return;
         }
         if (event.key === this.platformUtil.KEYMAP.BACKSPACE
@@ -364,11 +356,6 @@ export class IgxSimpleComboComponent extends IgxComboBaseDirective implements Co
         super.onBlur();
     }
 
-    /** @hidden @internal */
-    public onFocus(): void {
-        this._internalFilter = this.comboInput.value || '';
-    }
-
     /** @hidden @internal */
     public getEditElement(): HTMLElement {
         return this.comboInput.nativeElement;
@@ -465,7 +452,7 @@ export class IgxSimpleComboComponent extends IgxComboBaseDirective implements Co
             this.selectionService.select_items(this.id, argsSelection, true);
             this._value = argsSelection;
             if (this._updateInput) {
-                this.comboInput.value = this._internalFilter = this._displayValue = this.searchValue = displayText !== args.displayText
+                this.comboInput.value = this._displayValue = this.searchValue = displayText !== args.displayText
                     ? args.displayText
                     : this.createDisplayText(this.selection, [args.oldSelection]);
             }
@@ -545,7 +532,7 @@ export class IgxSimpleComboComponent extends IgxComboBaseDirective implements Co
 
     private clear(): void {
         this.clearSelection(true);
-        this.comboInput.value = this._internalFilter = this._displayValue = this.searchValue = '';
+        this.comboInput.value = this._displayValue = this.searchValue = '';
     }
 
     private isValid(value: any): boolean {