fix(simple-combo): Toggle combo on templated icon click (#12355)

* fix(simple-combo): handle click on suffix

* fix(simple-combo): fix failing text due to change

Co-authored-by: Konstantin Dinev <[email protected]>
Co-authored-by: Teodosia Hristodorova <[email protected]>
Co-authored-by: Stamen Stoychev <[email protected]>

Author: 4 people

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

@@ -34,11 +34,11 @@
             (click)="toggleCaseSensitive()">
         </igx-icon>
     </igx-suffix>
-    <igx-suffix class="igx-combo__toggle-button">
+    <igx-suffix class="igx-combo__toggle-button" (click)="onClick($event)">
         <ng-container *ngIf="toggleIconTemplate">
             <ng-container *ngTemplateOutlet="toggleIconTemplate; context: {$implicit: collapsed}"></ng-container>
         </ng-container>
-        <igx-icon (click)="onClick($event)" *ngIf="!toggleIconTemplate">
+        <igx-icon *ngIf="!toggleIconTemplate">
             {{ dropdown.collapsed ? 'arrow_drop_down' : 'arrow_drop_up'}}
         </igx-icon>
     </igx-suffix>

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

@@ -810,7 +810,8 @@ describe('IgxSimpleCombo', () => {
             TestBed.configureTestingModule({
                 declarations: [
                     IgxSimpleComboSampleComponent,
-                    IgxComboInContainerTestComponent
+                    IgxComboInContainerTestComponent,
+                    IgxSimpleComboIconTemplatesComponent
                 ],
                 imports: [
                     IgxSimpleComboModule,
@@ -992,9 +993,10 @@ describe('IgxSimpleCombo', () => {
             const toggleButton = fixture.debugElement.query(By.directive(IgxIconComponent));
             expect(toggleButton).toBeDefined();
 
-            toggleButton.triggerEventHandler('click', UIInteractions.getMouseEvent('click'));
+            toggleButton.nativeElement.click();
             fixture.detectChanges();
 
+            expect(combo.collapsed).toBeFalsy();
             expect(combo.onClick).toHaveBeenCalledTimes(1);
             expect((combo as any).virtDir.scrollTo).toHaveBeenCalledWith(0);
         });
@@ -1278,6 +1280,30 @@ describe('IgxSimpleCombo', () => {
             expect(combo.selection).toEqual([]);
             expect(combo.value).toBe('');
         });
+
+        it('should toggle dropdown list on clicking a templated toggle icon', fakeAsync(() => {
+            fixture = TestBed.createComponent(IgxSimpleComboIconTemplatesComponent);
+            fixture.detectChanges();
+            combo = fixture.componentInstance.combo;
+
+            const toggleIcon = fixture.debugElement.query(By.directive(IgxIconComponent));
+            expect(toggleIcon).toBeDefined();
+
+            expect(toggleIcon.nativeElement.textContent).toBe('search');
+            expect(combo.collapsed).toBeTruthy();
+            
+            toggleIcon.nativeElement.click();
+            tick();
+            fixture.detectChanges();
+
+            expect(combo.collapsed).toBeFalsy();
+
+            toggleIcon.nativeElement.click();
+            tick();
+            fixture.detectChanges();
+
+            expect(combo.collapsed).toBeTruthy();
+        }));
     });
 
     describe('Display density', () => {
@@ -1862,6 +1888,22 @@ export class IgxSimpleComboEmptyComponent {
     public name!: string;
 }
 
+@Component({
+    template: `<igx-simple-combo #combo [data]="data" displayKey="name" valueKey="id" [(ngModel)]="name">
+                    <ng-template igxComboToggleIcon><igx-icon>search</igx-icon></ng-template>
+                </igx-simple-combo>`
+})
+export class IgxSimpleComboIconTemplatesComponent {
+    @ViewChild('combo', { read: IgxSimpleComboComponent, static: true })
+    public combo: IgxSimpleComboComponent;
+
+    public data: any[] =  [
+        { name: 'Sofia', id: '1' }, 
+        { name: 'London', id: '2' }, 
+    ];;
+    public name!: string;
+}
+
 @Component({
     template: `<igx-simple-combo [(ngModel)]="selectedItem" [data]="items"></igx-simple-combo>`
 })