feat(dropdown): add clearSelction method #6218 (#6422)

Author: PlamenaMiteva

CHANGELOG.md

@@ -83,6 +83,9 @@ All notable changes for each version of this project will be documented in this
 - `IgxSelect`: 
     - adding `IgxSelectHeaderDirective` and `IgxSelectFooterDirective`. These can be used to provide a custom header, respectively footer templates for the `igxSelect` drop-down list. If there are no templates marked with these directives - no default templates will be used so the drop-down list will not have header nor footer.
 
+- `IgxDropDown`:
+    - `clearSelection` method is added, which can be used to deselect the selected dropdown item
+
 - `IgxCircularProgressBar`:
     - added `IgxProgressBarGradientDirective` to allow providing custom circular progress SVG gradients. Providing a custom gradient via a template is as easy as writing:
     ```html

projects/igniteui-angular/src/lib/drop-down/README.md

@@ -149,6 +149,7 @@ The following methods are available in the **igx-drop-down** component:
 | `setSelectedItem(index: number)` | Selects dropdown item by index. |
 | `open()` | Opens the dropdown. |
 | `close()` | Closes the dropdown. |
+| `clearSelection()` | Deselects the selected dropdown item. |
 
 ## Getters
 The following getters are available on the **igx-drop-down** component:

projects/igniteui-angular/src/lib/drop-down/drop-down.component.spec.ts

@@ -342,6 +342,39 @@ describe('IgxDropDown ', () => {
             expect(fixture.componentInstance.onSelection).toHaveBeenCalledTimes(1);
         }));
 
+        it('Should notify when selection is cleared', fakeAsync(() => {
+            const fixture = TestBed.createComponent(IgxDropDownTestComponent);
+            fixture.detectChanges();
+            const button = fixture.debugElement.query(By.css('button')).nativeElement;
+            const list = fixture.componentInstance.dropdown;
+            const mockObj = jasmine.createSpyObj('mockEvt', ['stopPropagation', 'preventDefault']);
+            spyOn(list.onSelection, 'emit').and.callThrough();
+            spyOn(list.onClosed, 'emit').and.callThrough();
+            spyOn(fixture.componentInstance, 'onSelection');
+
+            list.setSelectedItem(1);
+
+            button.click(mockObj);
+            tick();
+            fixture.detectChanges();
+            expect(list.selectedItem).toEqual(list.items[1]);
+            expect(list.onSelection.emit).toHaveBeenCalledTimes(1);
+            expect(fixture.componentInstance.onSelection).toHaveBeenCalledTimes(1);
+
+            const selectionArgs: ISelectionEventArgs = {
+                newSelection: null,
+                oldSelection: list.items[1],
+                cancel: false
+            };
+            list.clearSelection();
+            tick();
+            fixture.detectChanges();
+            expect(list.selectedItem).toBeNull();
+            expect(list.onSelection.emit).toHaveBeenCalledTimes(2);
+            expect(fixture.componentInstance.onSelection).toHaveBeenCalledTimes(2);
+            expect(list.onSelection.emit).toHaveBeenCalledWith(selectionArgs);
+        }));
+
         it('Should check if selection event return the proper eventArgs', fakeAsync(() => {
             const fixture = TestBed.createComponent(IgxDropDownTestComponent);
             fixture.detectChanges();
@@ -678,6 +711,45 @@ describe('IgxDropDown ', () => {
             expect(currentItem.componentInstance.itemIndex).toEqual(5);
         }));
 
+        it('Should deselect item when clearSelection is called', fakeAsync(() => {
+            const fixture = TestBed.createComponent(IgxDropDownTestScrollComponent);
+            fixture.detectChanges();
+            const button = fixture.debugElement.query(By.css('button')).nativeElement;
+            const list = fixture.componentInstance.dropdownScroll;
+            const listItems = list.items;
+
+            list.setSelectedItem(0);
+            button.click();
+            tick();
+            fixture.detectChanges();
+            let selectedItem = fixture.debugElement.query(By.css('.' + CSS_CLASS_SELECTED));
+            expect(selectedItem.componentInstance.itemIndex).toEqual(0);
+            expect(listItems[0].selected).toBeTruthy();
+            expect(selectedItem.classes[CSS_CLASS_SELECTED]).toBeTruthy();
+
+            list.clearSelection();
+            tick();
+            fixture.detectChanges();
+            expect(listItems[0].selected).toBeFalsy();
+            selectedItem = fixture.debugElement.query(By.css('.' + CSS_CLASS_SELECTED));
+            expect(selectedItem).toBeNull();
+
+            list.setSelectedItem(5);
+            tick();
+            fixture.detectChanges();
+            selectedItem = fixture.debugElement.query(By.css('.' + CSS_CLASS_SELECTED));
+            expect(selectedItem.componentInstance.itemIndex).toEqual(5);
+            expect(listItems[5].selected).toBeTruthy();
+            expect(selectedItem.classes[CSS_CLASS_SELECTED]).toBeTruthy();
+
+            list.clearSelection();
+            tick();
+            fixture.detectChanges();
+            expect(listItems[5].selected).toBeFalsy();
+            selectedItem = fixture.debugElement.query(By.css('.' + CSS_CLASS_SELECTED));
+            expect(selectedItem).toBeNull();
+        }));
+
         it('Home key should select the first enabled item', fakeAsync(() => {
             const fixture = TestBed.createComponent(IgxDropDownTestDisabledComponent);
             fixture.detectChanges();
@@ -1076,6 +1148,27 @@ describe('IgxDropDown ', () => {
             expect(selectedItem).toBeNull();
         }));
 
+        it('SelectedItem should return null when selection is cleared', fakeAsync(() => {
+            const fixture = TestBed.createComponent(IgxDropDownTestScrollComponent);
+            fixture.detectChanges();
+            const button = fixture.debugElement.query(By.css('button')).nativeElement;
+            const igxDropDown = fixture.componentInstance.dropdownScroll;
+            igxDropDown.setSelectedItem(3);
+            button.click();
+            tick();
+
+            fixture.detectChanges();
+            let selectedItem = igxDropDown.selectedItem;
+            expect(selectedItem).toBeTruthy();
+            expect(selectedItem.itemIndex).toEqual(3);
+
+            igxDropDown.clearSelection();
+            fixture.detectChanges();
+            selectedItem = igxDropDown.selectedItem;
+            expect(selectedItem).toBeNull();
+        }));
+
+
         it('Should return empty array for items when there are no items', fakeAsync(() => {
             const fixture = TestBed.createComponent(IgxDropDownTestEmptyListComponent);
             fixture.detectChanges();

projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts

@@ -561,6 +561,23 @@ export class IgxDropDownComponent extends IgxDropDownBaseDirective implements ID
         }
     }
 
+    /**
+     * Clears the selection of the dropdown
+     * ```typescript
+     * this.dropdown.clearSelection();
+     * ```
+     */
+    public clearSelection() {
+        const oldSelection = this.selectedItem;
+        const newSelection: IgxDropDownItemBaseDirective = null;
+        const args: ISelectionEventArgs = { oldSelection, newSelection, cancel: false };
+        this.onSelection.emit(args);
+        if (this.selectedItem && !args.cancel) {
+            this.selectedItem.selected = false;
+            this.selection.clear(this.id);
+        }
+    }
+
     /**
      * Checks whether the selection is valid
      * `null` - the selection should be emptied

src/app/drop-down/drop-down.sample.html

@@ -58,27 +58,49 @@
                 </igx-drop-down-item>
             </igx-drop-down-item-group>
         </igx-drop-down>
-
         <div igxOverlayOutlet #outlet="overlay-outlet"></div>
     </section>
-    <section>
-        <button igxButton="raised" igxRipple [igxToggleAction]="dropDownComfortable" [igxDropDownItemNavigation]="dropDownComfortable" displayDensity="comfortable">Display: Comfortable</button>
-        <igx-drop-down #dropDownComfortable (onSelection)="onSelection($event)" (onOpening)="onOpening($event)" height='400px'  displayDensity="comfortable">
+    <section class="sample-content">
+        <button igxButton="raised" igxRipple [igxToggleAction]="dropDownComfortable"
+            [igxDropDownItemNavigation]="dropDownComfortable" displayDensity="comfortable">Display: Comfortable</button>
+        <igx-drop-down #dropDownComfortable (onSelection)="onSelection($event)" (onOpening)="onOpening($event)"
+            height='400px' displayDensity="comfortable">
             <igx-drop-down-item *ngFor="let item of items" [disabled]="item.disabled" [isHeader]="item.header">
-                    {{ item.field }}
+                {{ item.field }}
             </igx-drop-down-item>
         </igx-drop-down>
-        <button igxButton="raised" igxRipple [igxToggleAction]="dropDownCosy" [igxDropDownItemNavigation]="dropDownCosy" displayDensity="cosy">Display: Cosy</button>
-        <igx-drop-down #dropDownCosy (onSelection)="onSelection($event)" (onOpening)="onOpening($event)" height='400px'  displayDensity="cosy">
+        <button igxButton="raised" igxRipple [igxToggleAction]="dropDownCosy" [igxDropDownItemNavigation]="dropDownCosy"
+            displayDensity="cosy">Display: Cosy</button>
+        <igx-drop-down #dropDownCosy (onSelection)="onSelection($event)" (onOpening)="onOpening($event)" height='400px'
+            displayDensity="cosy">
             <igx-drop-down-item *ngFor="let item of items" [disabled]="item.disabled" [isHeader]="item.header">
-                    {{ item.field }}
+                {{ item.field }}
             </igx-drop-down-item>
         </igx-drop-down>
-        <button igxButton="raised" igxRipple [igxToggleAction]="dropDownCompact" [igxDropDownItemNavigation]="dropDownCompact" displayDensity="compact">Display: Compact</button>
-        <igx-drop-down #dropDownCompact (onSelection)="onSelection($event)" (onOpening)="onOpening($event)" height='400px' displayDensity="compact">
+        <button igxButton="raised" igxRipple [igxToggleAction]="dropDownCompact"
+            [igxDropDownItemNavigation]="dropDownCompact" displayDensity="compact">Display: Compact</button>
+        <igx-drop-down #dropDownCompact (onSelection)="onSelection($event)" (onOpening)="onOpening($event)"
+            height='400px' displayDensity="compact">
             <igx-drop-down-item *ngFor="let item of items" [disabled]="item.disabled" [isHeader]="item.header">
+                {{ item.field }}
+            </igx-drop-down-item>
+        </igx-drop-down>
+    </section>
+    <section class="sample-content">
+        <igx-input-group class="input-group">
+            <input type="text" [igxToggleAction]="dropdown3" [igxDropDownItemNavigation]="dropdown3" igxInput
+                readonly="true" [value]="dropdown3.selectedItem?.value.field" />
+        </igx-input-group>
+        <igx-drop-down #dropdown3 (onOpening)="onOpening($event)" (onSelection)="onSelectionLogger($event)" height='400px'>
+            <igx-drop-down-item *ngFor="let item of items" [value]="item" [disabled]="item.disabled"
+                [isHeader]="item.header">
+                <div class="igx-drop-down__item-template">
                     {{ item.field }}
+                </div>
             </igx-drop-down-item>
         </igx-drop-down>
+        <button igxButton="raised" igxRipple (click)="clearSelection()" style="display: block">
+            Clear selection
+        </button>
     </section>
-</div>
+</div>

src/app/drop-down/drop-down.sample.ts

@@ -16,6 +16,7 @@ import { foods } from './foods';
 })
 export class DropDownSampleComponent implements OnInit {
     @ViewChild(IgxDropDownComponent, { static: true }) public igxDropDown: IgxDropDownComponent;
+    @ViewChild('dropdown3', { static: true }) public igxDropDownSelection: IgxDropDownComponent;
     @ViewChild('button', { static: true }) public button: ElementRef;
 
     @ViewChild(IgxOverlayOutletDirective, { static: true }) public igxOverlayOutlet: IgxOverlayOutletDirective;
@@ -147,13 +148,22 @@ export class DropDownSampleComponent implements OnInit {
         this.igxDropDown.close();
     }
 
+    public clearSelection() {
+        this.igxDropDownSelection.clearSelection();
+    }
+
     onSelection(event) {
         console.log(event);
         const old = event.oldSelection;
         event.oldSelection = event.newSelection;
         event.newSelection = old;
     }
 
+    onSelectionLogger(event) {
+        // event.cancel = true;
+        console.log(event);
+    }
+
     onSelectionMenu(eventArgs) {
         eventArgs.cancel = true;