Merge pull request #7741 from IgniteUI/bpenkov/overlay-close-on-escape

Add closeOnEsc property in overlay settings

Author: Lipata

CHANGELOG.md

@@ -7,9 +7,12 @@ All notable changes for each version of this project will be documented in this
 ### General
 - `igxCombo`
     - **Behavioral Change** - Change default positioning strategy from `ConnectedPositioningStrategy` to `AutoPositionStrategy`. The [`Auto`](https://www.infragistics.com/products/ignite-ui-angular/angular/components/overlay_position.html#auto) strategy will initially try to show the element like the Connected strategy does. If the element goes out of the viewport Auto will flip the starting point and the direction, i.e. if the direction is 'bottom', it will switch it to 'top' and so on. If after flipping direction the content goes out of the view, auto strategy will revert to initial start point and direction and will push the content into the view. Note after pushing the content it may hide the combo's input.
+- `IgxOverlay`
+    - Added new property - `closeOnEsc` - in `OverlaySettings`. The overlay can now be prevented from closing, on escape keypress, by setting the property to `false`, by default it's `true`.
+- `igxDialog`
+    - Added `closeOnEscapeKey` - with it, the dialog can be allowed or prevented from closing when `Esc` is pressed.
 - `IgxNavbar`:
     - **Breaking Changes** - The `igx-action-icon` has been renamed to `igx-navbar-action`. It should get renamed in your components via `ng update`;
-
 ### New Features
 - `IgxGridState` directive
     - Added support for expansion states, column selection and row pinning.

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

@@ -783,6 +783,7 @@ export class IgxDatePickerComponent implements IDatePicker, ControlValueAccessor
 
         this._modalOverlaySettings = {
             closeOnOutsideClick: true,
+            closeOnEsc: true,
             modal: true,
             outlet: this.outlet
         };

projects/igniteui-angular/src/lib/dialog/dialog.component.ts

@@ -83,6 +83,15 @@ export class IgxDialogComponent implements IToggleView, OnInit, OnDestroy, After
         this._isModal = val;
     }
 
+    get closeOnEscapeKey() {
+        return this._closeOnEscapeKey;
+    }
+
+    set closeOnEscapeKey(val: boolean) {
+        this._overlayDefaultSettings.closeOnEsc = val;
+        this._closeOnEscapeKey = val;
+    }
+
     /**
      * An @Input property controlling the `title` of the dialog.
      * ```html
@@ -301,6 +310,7 @@ export class IgxDialogComponent implements IToggleView, OnInit, OnDestroy, After
 
     private _overlayDefaultSettings: OverlaySettings;
     private _closeOnOutsideSelect = false;
+    private _closeOnEscapeKey = true;
     private _isModal = true;
     protected destroy$ = new Subject<boolean>();
 
@@ -404,6 +414,7 @@ export class IgxDialogComponent implements IToggleView, OnInit, OnDestroy, After
             positionStrategy: new GlobalPositionStrategy(this._positionSettings),
             scrollStrategy: new NoOpScrollStrategy(),
             modal: this.isModal,
+            closeOnEsc: this._closeOnEscapeKey,
             closeOnOutsideClick: this.closeOnOutsideSelect
         };
     }
@@ -503,7 +514,6 @@ export class IgxDialogComponent implements IToggleView, OnInit, OnDestroy, After
         }
 
     }
-
 }
 
 export interface IDialogEventArgs extends IBaseEventArgs {

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

@@ -475,6 +475,7 @@ describe('IgxToggle', () => {
                 positionStrategy: jasmine.any(ConnectedPositioningStrategy) as any,
                 closeOnOutsideClick: true,
                 modal: false,
+                closeOnEsc: true,
                 scrollStrategy: jasmine.any(AbsoluteScrollStrategy) as any,
                 excludePositionTarget: true
             };
@@ -498,6 +499,7 @@ describe('IgxToggle', () => {
                 positionStrategy: jasmine.any(ConnectedPositioningStrategy) as any,
                 closeOnOutsideClick: true,
                 modal: false,
+                closeOnEsc: true,
                 scrollStrategy: jasmine.any(AbsoluteScrollStrategy) as any,
                 excludePositionTarget: true
             };
@@ -533,6 +535,7 @@ describe('IgxToggle', () => {
                 positionStrategy: jasmine.any(ConnectedPositioningStrategy) as any,
                 closeOnOutsideClick: true,
                 modal: false,
+                closeOnEsc: true,
                 scrollStrategy: jasmine.any(AbsoluteScrollStrategy) as any,
                 excludePositionTarget: true
             };
@@ -591,6 +594,7 @@ describe('IgxToggle', () => {
                 positionStrategy: jasmine.any(ConnectedPositioningStrategy) as any,
                 closeOnOutsideClick: true,
                 modal: false,
+                closeOnEsc: true,
                 scrollStrategy: jasmine.any(AbsoluteScrollStrategy) as any,
                 outlet: jasmine.any(IgxOverlayOutletDirective) as any,
                 excludePositionTarget: true

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

@@ -429,6 +429,7 @@ export class IgxToggleActionDirective implements OnInit {
             scrollStrategy: new AbsoluteScrollStrategy(),
             closeOnOutsideClick: true,
             modal: false,
+            closeOnEsc: true,
             excludePositionTarget: true
         };
     }