feat(simple-combo): hide clear button immediately when clearing selection by typing (#12556)

* feat(simple-combo): hide clear btn if no selection

* feat(simple-combo): use selection.length instead

Author: ddaribo

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

@@ -20,7 +20,7 @@
     <ng-container ngProjectAs="igx-suffix">
         <ng-content select="igx-suffix"></ng-content>
     </ng-container>
-    <igx-suffix *ngIf="comboInput.value.length" aria-label="Clear Selection" class="igx-combo__clear-button"
+    <igx-suffix *ngIf="selection.length" aria-label="Clear Selection" class="igx-combo__clear-button"
         (click)="handleClear($event)">
         <ng-container *ngIf="clearIconTemplate">
             <ng-container *ngTemplateOutlet="clearIconTemplate"></ng-container>

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

@@ -1286,7 +1286,7 @@ describe('IgxSimpleCombo', () => {
             fixture.detectChanges();
             combo = fixture.componentInstance.combo;
 
-            const toggleIcon = fixture.debugElement.query(By.directive(IgxIconComponent));
+            const toggleIcon = fixture.debugElement.query(By.css(`.${CSS_CLASS_TOGGLEBUTTON}`));
             expect(toggleIcon).toBeDefined();
 
             expect(toggleIcon.nativeElement.textContent).toBe('search');
@@ -1311,12 +1311,19 @@ describe('IgxSimpleCombo', () => {
 
             expect(combo.selection.length).toEqual(1);
 
+            let clearButton = fixture.debugElement.query(By.css(`.${CSS_CLASS_CLEARBUTTON}`));
+            expect(clearButton).not.toBeNull();
+
             input.triggerEventHandler('focus', {});
             fixture.detectChanges();
 
             UIInteractions.simulateTyping('L', input, 9, 10);
             fixture.detectChanges();
             expect(combo.selection.length).toEqual(0);
+
+            //should hide the clear button immediately when clearing the selection by typing
+            clearButton = fixture.debugElement.query(By.css(`.${CSS_CLASS_CLEARBUTTON}`));
+            expect(clearButton).toBeNull();
         });
     });