feat(IgxSimpleCombo): not open the drop-down on clear (#12790)

* feat(IgxSimpleCombo): not open the drop-down on clear

* feat(IgxSimpleCombo): added demo samples for the old behavior

* feat(IgxSimpleCombo): added breaking change feat to the changelog

* feat(IgxSimpleCombo): added required changes

* feat(IgxSimpleCombo): added overload for handleSelectionChanging

* feat(IgxSimpleCombo): chenged handleSelectionChanging function logic

* feat(IgxSimpleCombo): removed unused member

Author: georgianastasov

CHANGELOG.md

@@ -66,6 +66,8 @@ All notable changes for each version of this project will be documented in this
 - **Breaking Changes** - ` $label-floated-background` and `$label-floated-disabled-background` properties of `IgxInputGroupComponent` theme has been removed.
 - `IgxInputGroupComponent` The input group has been refactored so that the floating label for the input of `type="border"` does not require a background to match the surface background under the input field. Also, suffixes and prefixes are refactored to take the full height of the input which makes it easy to add background to them.
 - **Breaking Changes** - `$size` property of `scrollbar-theme` theme has been renamed to `$scrollbar-size`.
+- `IgxSimpleCombo`
+    - The `IgxSimpleCombo` will not open its drop-down on clear.
 
 ## 15.0.1
 

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

@@ -1440,12 +1440,19 @@ describe('IgxSimpleCombo', () => {
             tick();
             fixture.detectChanges();
             expect(combo.collapsed).toEqual(true);
+        }));
+
+        it('should not open when clearing the selection from the clear icon when the combo is collapsed', fakeAsync(() => {
+            fixture = TestBed.createComponent(IgxSimpleComboSampleComponent);
+            fixture.detectChanges();
+            combo = fixture.componentInstance.combo;
+
+            combo.select('Connecticut');
+            fixture.detectChanges();
 
             combo.handleClear(new MouseEvent('click'));
             fixture.detectChanges();
-            expect(combo.value).toEqual('');
-            expect(combo.collapsed).toEqual(false);
-            expect(combo.overlaySettings.positionStrategy.settings.verticalDirection).toBe(-1);
+            expect(combo.collapsed).toEqual(true);
         }));
     });
 

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

@@ -378,12 +378,7 @@ export class IgxSimpleComboComponent extends IgxComboBaseDirective implements Co
             return;
         }
         this.clearSelection(true);
-        if (this.collapsed) {
-            this.filterValue = '';
-            this.cdr.detectChanges();
-            this.open();
-            this.dropdown.navigateFirst();
-        } else {
+        if(!this.collapsed){
             this.focusSearchInput(true);
         }
         event.stopPropagation();

src/app/combo/combo.sample.html

@@ -106,6 +106,39 @@ <h1 class="combo-sample__title">Remote Binding</h1>
         </igx-simple-combo>
     </section>
 
+    <section class="combo-sample__section">
+        <h1 class="combo-sample__title">Simple combo that opens on clear by handling its selectionChanging event</h1>
+        <igx-simple-combo  
+                    #simpleComboOpenOnClear
+                    [displayDensity]="'comfortable'"
+                    [(ngModel)]="singleValue"
+                    type="border"
+                    [data]="items"
+                    [displayKey]="valueKeyVar"
+                    [disabled]="isDisabled"
+                    [valueKey]="valueKeyVar"
+                    [groupKey]="valueKeyVar ? 'region' : ''" 
+                    (selectionChanging)="handleSelectionChanging($event)">
+                <label igxLabel>States</label>
+        </igx-simple-combo>
+        <h1 class="combo-sample__title">Simple combo that opens after its templated clear icon is clicked</h1>
+        <igx-simple-combo  
+                    #simpleComboOpenOnClearWithTemplate
+                    [displayDensity]="'comfortable'"
+                    [(ngModel)]="singleValue"
+                    type="border"
+                    [data]="items"
+                    [displayKey]="valueKeyVar"
+                    [disabled]="isDisabled"
+                    [valueKey]="valueKeyVar"
+                    [groupKey]="valueKeyVar ? 'region' : ''" >
+                <label igxLabel>States</label>
+                <ng-template igxComboClearIcon>
+                    <igx-icon (click)="simpleComboOpenOnClearWithTemplate.open()">cancel</igx-icon>
+                </ng-template>
+        </igx-simple-combo>
+    </section>
+
     <section class="combo-sample__section">
         <h1 class="combo-sample__title">Template items</h1>
 
@@ -145,7 +178,7 @@ <h1 class="combo-sample__title">Template items</h1>
         <igx-combo #playgroundCombo [placeholder]="'Locations'"
             [showSearchCaseIcon]='true'
             (addition)="handleAddition($event)"
-            (selectionChanging)="handleSelectionChange($event)"
+            (selectionChanging)="handleSelectionChanging($event)"
             [data]="items"
             [allowCustomValues]="customValuesFlag"
             [autoFocusSearch]="autoFocusSearch"

src/app/combo/combo.sample.ts

@@ -54,7 +54,10 @@ export class ComboSampleComponent implements OnInit, AfterViewInit {
     private customItemTemplate;
 
     @ViewChild('simpleCombo', { read: IgxSimpleComboComponent, static: true })
-    private simpleCombo;
+    private simpleCombo: IgxSimpleComboComponent;
+
+    @ViewChild('simpleComboOpenOnClear')
+    public simpleComboOpenOnClear: IgxSimpleComboComponent;
 
     public alignment: ButtonGroupAlignment = ButtonGroupAlignment.vertical;
     public toggleItemState = false;
@@ -251,10 +254,6 @@ export class ComboSampleComponent implements OnInit, AfterViewInit {
         this.densityCombo.displayDensity = density;
     }
 
-    public handleSelectionChange(event: IComboSelectionChangingEventArgs) {
-        console.log(event);
-    }
-
     public changeFiltering(e: IChangeSwitchEventArgs) {
         if (e.checked) {
             this.igxCombo.filterFunction = this.customFilterFunction;
@@ -330,8 +329,15 @@ export class ComboSampleComponent implements OnInit, AfterViewInit {
         this.searchText = '';
     }
 
-    public handleSelectionChanging(evt: IComboSelectionChangingEventArgs) {
-        this.hasSelection = !!evt?.newSelection.length;
+    public handleSelectionChanging(evt: IComboSelectionChangingEventArgs | ISimpleComboSelectionChangingEventArgs) {
+        if ('added' in evt) {
+            this.hasSelection = !!evt?.newSelection.length;
+            return;
+        } 
+
+        if (!evt.newSelection) {
+            this.simpleComboOpenOnClear.open();
+        }
     }
 
     public onSimpleComboDataLoading() {