Merge pull request #9385 from IgniteUI/vslavov/date-picker-toggle-event-args

fix(date-picker): emit proper event args on open/close events

Author: Lipata

projects/igniteui-angular/src/lib/date-picker/date-picker.component.spec.ts

@@ -220,11 +220,11 @@ describe('IgxDatePicker', () => {
                 onClosed: new EventEmitter<OverlayEventArgs>(),
                 onClosing: new EventEmitter<OverlayClosingEventArgs>(),
                 show(..._args) {
-                    this.onOpening.emit(mockOverlayEventArgs);
+                    this.onOpening.emit(Object.assign({}, mockOverlayEventArgs, { cancel: false }));
                     this.onOpened.emit(mockOverlayEventArgs);
                 },
                 hide(..._args) {
-                    this.onClosing.emit(mockOverlayEventArgs);
+                    this.onClosing.emit(Object.assign({}, mockOverlayEventArgs, { cancel: false }));
                     this.onClosed.emit(mockOverlayEventArgs);
                 },
                 detach: (..._args) => { },
@@ -297,7 +297,7 @@ describe('IgxDatePicker', () => {
             //#endregion
 
             //#region Events
-            xit('should properly emit open/close events', () => {
+            it('should properly emit open/close events', () => {
                 spyOn(datePicker.opened, 'emit');
                 spyOn(datePicker.closed, 'emit');
 
@@ -310,17 +310,17 @@ describe('IgxDatePicker', () => {
                 expect(datePicker.closed.emit).toHaveBeenCalledWith({ owner: datePicker });
             });
 
-            xit('should properly emit opening/closing events', () => {
+            it('should properly emit opening/closing events', () => {
                 spyOn(datePicker.opening, 'emit');
                 spyOn(datePicker.closing, 'emit');
 
                 datePicker.ngAfterViewInit();
 
                 datePicker.open();
-                expect(datePicker.opening.emit).toHaveBeenCalledWith({ owner: datePicker, cancel: false });
+                expect(datePicker.opening.emit).toHaveBeenCalledWith({ owner: datePicker, event: undefined, cancel: false });
 
                 datePicker.close();
-                expect(datePicker.closing.emit).toHaveBeenCalledWith({ owner: datePicker, cancel: false });
+                expect(datePicker.closing.emit).toHaveBeenCalledWith({ owner: datePicker, event: undefined, cancel: false });
             });
 
             it('should emit valueChange when the value changes', () => {

projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts

@@ -32,7 +32,6 @@ import { fadeIn, fadeOut } from '../animations/fade';
 import { PickerBaseDirective } from '../date-common/picker-base.directive';
 import { DisplayDensityToken, IDisplayDensityOptions } from '../core/density';
 import { DatePart, DatePartDeltas, IgxDateTimeEditorDirective } from '../directives/date-time-editor/public_api';
-import { DeprecateProperty } from '../core/deprecateDecorators';
 import { DateTimeUtil } from '../date-common/util/date-time.util';
 import { PickerHeaderOrientation as PickerHeaderOrientation } from '../date-common/types';
 import { IDatePickerValidationFailedEventArgs } from './date-picker.common';
@@ -843,9 +842,10 @@ export class IgxDatePickerComponent extends PickerBaseDirective implements Contr
     }
 
     private subscribeToOverlayEvents() {
-        this._overlayService.onOpening.pipe(...this._overlaySubFilter).subscribe((eventArgs) => {
-            const args = eventArgs as IBaseCancelableBrowserEventArgs;
+        this._overlayService.onOpening.pipe(...this._overlaySubFilter).subscribe((eventArgs: OverlayCancelableEventArgs) => {
+            const args: IBaseCancelableBrowserEventArgs = { owner: this, event: eventArgs.event, cancel: eventArgs.cancel };
             this.opening.emit(args);
+            eventArgs.cancel = args.cancel;
             if (args.cancel) {
                 this._overlayService.detach(this._overlayId);
                 return;
@@ -855,8 +855,9 @@ export class IgxDatePickerComponent extends PickerBaseDirective implements Contr
             this._collapsed = false;
         });
 
-        this._overlayService.onOpened.pipe(...this._overlaySubFilter).subscribe((eventArgs) => {
-            this.opened.emit(eventArgs as IBaseEventArgs);
+        this._overlayService.onOpened.pipe(...this._overlaySubFilter).subscribe((_eventArgs) => {
+            const args: IBaseEventArgs = { owner: this };
+            this.opened.emit(args);
             if (this._calendar?.daysView?.selectedDates) {
                 this._calendar?.daysView?.focusActiveDate();
                 return;
@@ -868,9 +869,10 @@ export class IgxDatePickerComponent extends PickerBaseDirective implements Contr
             }
         });
 
-        this._overlayService.onClosing.pipe(...this._overlaySubFilter).subscribe((eventArgs) => {
-            const args = eventArgs as IBaseCancelableBrowserEventArgs;
+        this._overlayService.onClosing.pipe(...this._overlaySubFilter).subscribe((eventArgs: OverlayCancelableEventArgs) => {
+            const args: IBaseCancelableBrowserEventArgs = { owner: this, event: eventArgs.event, cancel: eventArgs.cancel };
             this.closing.emit(args);
+            eventArgs.cancel = args.cancel;
             if (args.cancel) {
                 return;
             }
@@ -880,8 +882,9 @@ export class IgxDatePickerComponent extends PickerBaseDirective implements Contr
             }
         });
 
-        this._overlayService.onClosed.pipe(...this._overlaySubFilter).subscribe((event) => {
-            this.closed.emit(event as IBaseEventArgs);
+        this._overlayService.onClosed.pipe(...this._overlaySubFilter).subscribe((_event) => {
+            const args: IBaseEventArgs = { owner: this };
+            this.closed.emit(args);
             this._overlayService.detach(this._overlayId);
             this._collapsed = true;
             this._overlayId = null;