fix(*): pass optional event arguments for closing

Author: ddaribo

projects/igniteui-angular/src/lib/directives/toggle/toggle.directive.ts

@@ -241,7 +241,7 @@ export class IgxToggleDirective implements IToggleView, OnInit, OnDestroy {
      * this.myToggle.close();
      * ```
      */
-    public close() {
+    public close(event?: Event) {
         //  if toggle is collapsed do nothing
         //  if there is close animation do nothing, toggle will close anyway
         const info = this.overlayService.getOverlayById(this._overlayId);
@@ -250,7 +250,7 @@ export class IgxToggleDirective implements IToggleView, OnInit, OnDestroy {
             return;
         }
 
-        this.overlayService.hide(this._overlayId);
+        this.overlayService.hide(this._overlayId, event);
     }
 
     /**

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

@@ -8,7 +8,7 @@ import { IgxDropDownComponent, IgxDropDownModule } from './public_api';
 import { ISelectionEventArgs } from './drop-down.common';
 import { IgxTabsComponent, IgxTabsModule } from '../tabs/tabs/public_api';
 import { UIInteractions, wait } from '../test-utils/ui-interactions.spec';
-import { CancelableEventArgs } from '../core/utils';
+import { CancelableEventArgs, IBaseCancelableBrowserEventArgs } from '../core/utils';
 import { configureTestSuite } from '../test-utils/configure-suite';
 import { take } from 'rxjs/operators';
 import { IgxDropDownGroupComponent } from './drop-down-group.component';
@@ -524,6 +524,47 @@ describe('IgxDropDown ', () => {
                 };
                 expect(dropdown.selectionChanging.emit).toHaveBeenCalledWith(canceledSelectionArgs);
             }));
+            it('should provide correct event argument when closing through keyboard', fakeAsync(() => {
+                spyOn(dropdown.closing, 'emit').and.callThrough();
+                const dropdownElement = fixture.debugElement.query(By.css(`.${CSS_CLASS_DROP_DOWN_BASE}`));
+    
+                dropdown.toggle();
+                tick();
+                fixture.detectChanges();
+                let focusedItem = fixture.debugElement.query(By.css(`.${CSS_CLASS_FOCUSED}`));
+                expect(focusedItem).toBeDefined();
+    
+                let eventArgs: IBaseCancelableBrowserEventArgs;
+                dropdown.closing.pipe(take(1)).subscribe((args: IBaseCancelableBrowserEventArgs) => {
+                    eventArgs = args;
+                });
+    
+                UIInteractions.triggerEventHandlerKeyDown('escape', dropdownElement);
+                tick();
+                fixture.detectChanges();
+                expect(dropdown.closing.emit).toHaveBeenCalledTimes(1);
+                expect(eventArgs.event).toBeDefined();
+                expect((eventArgs.event as KeyboardEvent).type).toEqual('keydown');
+                expect((eventArgs.event as KeyboardEvent).key).toEqual('escape');
+    
+                dropdown.toggle();
+                tick();
+                fixture.detectChanges();
+                focusedItem = fixture.debugElement.query(By.css(`.${CSS_CLASS_FOCUSED}`));
+                expect(focusedItem).toBeDefined();
+    
+                dropdown.closing.pipe(take(1)).subscribe((args: IBaseCancelableBrowserEventArgs) => {
+                    eventArgs = args;
+                });
+    
+                UIInteractions.triggerEventHandlerKeyDown('enter', dropdownElement);
+                tick();
+                fixture.detectChanges();
+                expect(dropdown.closing.emit).toHaveBeenCalledTimes(2);
+                expect(eventArgs.event).toBeDefined();
+                expect((eventArgs.event as KeyboardEvent).type).toEqual('keydown');
+                expect((eventArgs.event as KeyboardEvent).key).toEqual('enter');
+            }));
             it('should be able to change selection when manipulating ISelectionEventArgs', fakeAsync(() => {
                 expect(dropdown.selectedItem).toEqual(null);
                 dropdown.toggle();

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

@@ -242,8 +242,8 @@ export class IgxDropDownComponent extends IgxDropDownBaseDirective implements ID
      * this.dropdown.close();
      * ```
      */
-    public close() {
-        this.toggleDirective.close();
+    public close(event?: Event) {
+        this.toggleDirective.close(event);
     }
 
     /**
@@ -438,7 +438,7 @@ export class IgxDropDownComponent extends IgxDropDownBaseDirective implements ID
     /** Keydown Handler */
     public onItemActionKey(key: DropDownActionKey, event?: Event) {
         super.onItemActionKey(key, event);
-        this.close();
+        this.close(event);
     }
 
     /**
@@ -527,7 +527,7 @@ export class IgxDropDownComponent extends IgxDropDownBaseDirective implements ID
                     }
                 }
                 if (event) {
-                    this.toggleDirective.close();
+                    this.toggleDirective.close(event);
                 }
             } else {
                 throw new Error('Please provide a valid drop-down item for the selection!');