Merge pull request #7793 from IgniteUI/bpenkov/consecutively-close-overlays-on-esc

Consecutevly close overlays on escape keypress

Author: Lipata

CHANGELOG.md

@@ -8,9 +8,10 @@ All notable changes for each version of this project will be documented in this
 - `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`.
+    - Added new property `closeOnEscape` in `OverlaySettings` that controls whether the overlay should close on escape keypress. By default `closeOnEsc` is set to `false`.
+    - **Behavioral Change** - `modal` overlays shown directly through the Overlay Service no longer close on Escape by default. That behavior can now be specified using the `closeOnEscape` property.
 - `igxDialog`
-    - Added `closeOnEscapeKey` - with it, the dialog can be allowed or prevented from closing when `Esc` is pressed.
+    - Added `closeOnEscape` - 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`;
 - `igxGrid`

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

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

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

@@ -73,23 +73,36 @@ export class IgxDialogComponent implements IToggleView, OnInit, OnDestroy, After
     @Input()
     public id = `igx-dialog-${DIALOG_ID++}`;
 
+    /**
+     * Controls whether the dialog should be shown as modal. Defaults to `true`
+     * ```html
+     * <igx-dialog [isModal]="false" ></igx-dialog>
+     * ```
+     */
     @Input()
-    get isModal() {
+    public get isModal() {
         return this._isModal;
     }
 
-    set isModal(val: boolean) {
+    public set isModal(val: boolean) {
         this._overlayDefaultSettings.modal = val;
         this._isModal = val;
     }
 
-    get closeOnEscapeKey() {
-        return this._closeOnEscapeKey;
+    /**
+     * Controls whether the dialog should close when `Esc` key is pressed. Defaults to `true`
+     * ```html
+     * <igx-dialog [closeOnEscape]="false" ></igx-dialog>
+     * ```
+     */
+    @Input()
+    public get closeOnEscape() {
+        return this._closeOnEscape;
     }
 
-    set closeOnEscapeKey(val: boolean) {
-        this._overlayDefaultSettings.closeOnEsc = val;
-        this._closeOnEscapeKey = val;
+    public set closeOnEscape(val: boolean) {
+        this._overlayDefaultSettings.closeOnEscape = val;
+        this._closeOnEscape = val;
     }
 
     /**
@@ -310,7 +323,7 @@ export class IgxDialogComponent implements IToggleView, OnInit, OnDestroy, After
 
     private _overlayDefaultSettings: OverlaySettings;
     private _closeOnOutsideSelect = false;
-    private _closeOnEscapeKey = true;
+    private _closeOnEscape = true;
     private _isModal = true;
     protected destroy$ = new Subject<boolean>();
 
@@ -414,7 +427,7 @@ export class IgxDialogComponent implements IToggleView, OnInit, OnDestroy, After
             positionStrategy: new GlobalPositionStrategy(this._positionSettings),
             scrollStrategy: new NoOpScrollStrategy(),
             modal: this.isModal,
-            closeOnEsc: this._closeOnEscapeKey,
+            closeOnEscape: this._closeOnEscape,
             closeOnOutsideClick: this.closeOnOutsideSelect
         };
     }

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

@@ -475,7 +475,6 @@ describe('IgxToggle', () => {
                 positionStrategy: jasmine.any(ConnectedPositioningStrategy) as any,
                 closeOnOutsideClick: true,
                 modal: false,
-                closeOnEsc: true,
                 scrollStrategy: jasmine.any(AbsoluteScrollStrategy) as any,
                 excludePositionTarget: true
             };
@@ -499,7 +498,6 @@ describe('IgxToggle', () => {
                 positionStrategy: jasmine.any(ConnectedPositioningStrategy) as any,
                 closeOnOutsideClick: true,
                 modal: false,
-                closeOnEsc: true,
                 scrollStrategy: jasmine.any(AbsoluteScrollStrategy) as any,
                 excludePositionTarget: true
             };
@@ -535,7 +533,6 @@ describe('IgxToggle', () => {
                 positionStrategy: jasmine.any(ConnectedPositioningStrategy) as any,
                 closeOnOutsideClick: true,
                 modal: false,
-                closeOnEsc: true,
                 scrollStrategy: jasmine.any(AbsoluteScrollStrategy) as any,
                 excludePositionTarget: true
             };
@@ -594,7 +591,6 @@ 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,7 +429,6 @@ export class IgxToggleActionDirective implements OnInit {
             scrollStrategy: new AbsoluteScrollStrategy(),
             closeOnOutsideClick: true,
             modal: false,
-            closeOnEsc: true,
             excludePositionTarget: true
         };
     }