Simple-combo: Opening the combo on input click - master (#12618)

* chore(simple-combo): Opening the combo when the user has clicked on the input

* chore(changelog): Adding behavior changes of the simple-combo in changelog

Author: IvanKitanov17

CHANGELOG.md

@@ -14,7 +14,9 @@ All notable changes for each version of this project will be documented in this
 - `igxPivotGrid`
     - Adding `aggregatorName` for pivot value configuration as an alternative to setting `aggregator` function. If both are set `aggregatorName` takes precedent. If none are set an error is thrown.
 - `IgxSimpleCombo`
-    - **Behavioral Change** - Keyboard navigation `ArrowUp` - when the combo is opened `ArrowUp` will close the dropdown if the search input is focused. If the active item is the first one in the list, the focus will be moved back to the search input while also selecting all of the text in the input. Otherwise `ArrowUp` will move to the previous list item.
+    - **Behavioral Change** 
+    - When the user clicks on the combo's input, the dropdown opens up.
+    - Keyboard navigation `ArrowUp` - when the combo is opened `ArrowUp` will close the dropdown if the search input is focused. If the active item is the first one in the list, the focus will be moved back to the search input while also selecting all of the text in the input. Otherwise `ArrowUp` will move to the previous list item.
 
 ## 15.0.0
 

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

@@ -14,7 +14,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)"
+        (focus)="onFocus()" (input)="handleInputChange($event)" (click)="handleInputClick()"
         (keyup)="handleKeyUp($event)" (keydown)="handleKeyDown($event)" (blur)="onBlur()"/>
 
     <ng-container ngProjectAs="igx-suffix">

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

@@ -1139,6 +1139,37 @@ describe('IgxSimpleCombo', () => {
             expect(combo.selection.length).toEqual(0);
         });
 
+        it('should open the combo when input is focused', () => {
+            spyOn(combo, 'open').and.callThrough();
+            spyOn(combo, 'close').and.callThrough();
+
+            input.triggerEventHandler('focus', {});
+            fixture.detectChanges();
+
+            input.triggerEventHandler('click', UIInteractions.getMouseEvent('click'));
+            fixture.detectChanges();
+
+            expect(combo.open).toHaveBeenCalledTimes(1);
+
+            input.triggerEventHandler('click', UIInteractions.getMouseEvent('click'));
+            fixture.detectChanges();
+
+            expect(combo.open).toHaveBeenCalledTimes(1);
+
+            UIInteractions.triggerEventHandlerKeyDown('Tab', input);
+            fixture.detectChanges();
+
+            expect(combo.close).toHaveBeenCalledTimes(1);
+
+            input.triggerEventHandler('focus', {});
+            fixture.detectChanges();
+
+            input.triggerEventHandler('click', UIInteractions.getMouseEvent('click'));
+            fixture.detectChanges();
+
+            expect(combo.open).toHaveBeenCalledTimes(1);
+        });
+
         it('should empty any invalid item values', () => {
             combo.valueKey = 'key';
             combo.displayKey = 'value';

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

@@ -272,6 +272,14 @@ export class IgxSimpleComboComponent extends IgxComboBaseDirective implements Co
         this.composing = true;
     }
 
+    /** @hidden @internal */
+    public handleInputClick(): void {
+        if (this.collapsed) {
+            this.open();
+            this.comboInput.focus();
+        }
+    }
+
     /** @hidden @internal */
     public handleKeyDown(event: KeyboardEvent): void {
         if (event.key === this.platformUtil.KEYMAP.ENTER) {
@@ -373,7 +381,9 @@ export class IgxSimpleComboComponent extends IgxComboBaseDirective implements Co
     /** @hidden @internal */
     public handleOpened(): void {
         this.triggerCheck();
-        this.dropdownContainer.nativeElement.focus();
+        if (!this.comboInput.focused) {
+            this.dropdownContainer.nativeElement.focus();
+        }
         this.opened.emit({ owner: this });
     }