fix(drop-down): properly overwrite selection w/ onSelection args, #6208 (#6255)

Author: ViktorSlavov

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

@@ -420,6 +420,51 @@ describe('IgxDropDown ', () => {
             expect(list.onSelection.emit).toHaveBeenCalledWith(selectionArgs1);
         }));
 
+        it('Should be able to change selection when manipulating ISelectionEventArgs', fakeAsync(() => {
+            const fixture = TestBed.createComponent(IgxDropDownTestScrollComponent);
+            fixture.detectChanges();
+            const dropdown = fixture.componentInstance.dropdownScroll;
+            expect(dropdown.selectedItem).toEqual(null);
+            dropdown.toggle();
+            tick();
+            fixture.detectChanges();
+            tick();
+
+            // Overwrite selection args
+            let expectedSelected = dropdown.items[4];
+            const calledSelected = dropdown.items[1];
+            const subscription = dropdown.onSelection.subscribe((e: ISelectionEventArgs) => {
+                expect(e.newSelection).toEqual(calledSelected);
+                e.newSelection = expectedSelected;
+            });
+            dropdown.selectItem(calledSelected);
+            tick();
+            expect(dropdown.selectedItem).toEqual(expectedSelected);
+
+            // Clear selection
+            expectedSelected = null;
+            dropdown.selectItem(calledSelected);
+            tick();
+            expect(dropdown.selectedItem).toEqual(expectedSelected);
+
+            // Set header - error
+            dropdown.toggle();
+            tick();
+            fixture.detectChanges();
+
+            expectedSelected = dropdown.items[4];
+            dropdown.items[4].isHeader = true;
+
+            spyOn(dropdown, 'selectItem').and.callThrough();
+            expect(() => { dropdown.selectItem(calledSelected); }).toThrow();
+
+            // Set non-IgxDropDownItemBaseDirective
+            expectedSelected = 7 as any;
+            expect(() => { dropdown.selectItem(calledSelected); }).toThrow();
+
+            subscription.unsubscribe();
+        }));
+
         it('Should persist selection through scrolling', fakeAsync(() => {
             const fixture = TestBed.createComponent(IgxDropDownTestScrollComponent);
             fixture.detectChanges();

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

@@ -136,8 +136,8 @@ export class IgxDropDownComponent extends IgxDropDownBase implements IDropDownBa
     public get focusedItem(): IgxDropDownItemBase {
         if (this.virtDir) {
             return this._focusedItem && this._focusedItem.index !== -1 ?
-            (this.children.find(e => e.index === this._focusedItem.index) || null) :
-            null;
+                (this.children.find(e => e.index === this._focusedItem.index) || null) :
+                null;
         }
         return this._focusedItem;
     }
@@ -538,19 +538,35 @@ export class IgxDropDownComponent extends IgxDropDownBase implements IDropDownBa
         this.onSelection.emit(args);
 
         if (!args.cancel) {
-            this.selection.set(this.id, new Set([newSelection]));
-            if (!this.virtDir) {
-                if (oldSelection) {
-                    oldSelection.selected = false;
+            if (this.isSelectionValid(args.newSelection)) {
+                this.selection.set(this.id, new Set([args.newSelection]));
+                if (!this.virtDir) {
+                    if (oldSelection) {
+                        oldSelection.selected = false;
+                    }
+                    if (args.newSelection) {
+                        args.newSelection.selected = true;
+                    }
                 }
-                if (newSelection) {
-                    newSelection.selected = true;
+                if (event) {
+                    this.toggleDirective.close();
                 }
-            }
-            if (event) {
-                this.toggleDirective.close();
+            } else {
+                throw new Error('Please provide a valid drop-down item for the selection!');
             }
         }
     }
+
+    /**
+     * Checks whether the selection is valid
+     * `null` - the selection should be emptied
+     * Virtual? - the selection should at least have and `index` and `value` property
+     * Non-virtual? - the selection should be a valid drop-down item and **not** be a header
+     */
+    protected isSelectionValid(selection: any): boolean {
+        return selection === null
+        || (this.virtDir && selection.hasOwnProperty('value') && selection.hasOwnProperty('index'))
+        || (selection instanceof IgxDropDownItemComponent && !selection.isHeader);
+    }
 }