fix(modal): don't close modal on ESC if file dialog is open

Keyboard events in modal and autoclose handling use 'keydown' instead of 'keyup' Fixes ng-bootstrap#3439
maxokorokov · Nov 7, 2019 · c3253a3 · c3253a3
1 parent 9a92667
commit c3253a3
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 6 deletions.
diff --git a/src/modal/modal-window.ts b/src/modal/modal-window.ts
@@ -55,7 +55,7 @@ export class NgbModalWindow implements OnInit,
   constructor(
       @Inject(DOCUMENT) private _document: any, private _elRef: ElementRef<HTMLElement>, private _zone: NgZone) {
     _zone.runOutsideAngular(() => {
-      fromEvent<KeyboardEvent>(this._elRef.nativeElement, 'keyup')
+      fromEvent<KeyboardEvent>(this._elRef.nativeElement, 'keydown')
           .pipe(
               takeUntil(this.dismissEvent),
               // tslint:disable-next-line:deprecation

diff --git a/src/modal/modal.spec.ts b/src/modal/modal.spec.ts
@@ -353,13 +353,13 @@ describe('ngb-modal', () => {
            expect(fixture.nativeElement).toHaveModal(['foo', 'bar']);
            expect(document.activeElement).toBe(ngbModalWindow2);
 
-           ngbModalWindow2.dispatchEvent(createKeyEvent(Key.Escape));
+           ngbModalWindow2.dispatchEvent(createKeyEvent(Key.Escape, {type: 'keydown'}));
            tick(16);  // RAF in escape handling
            fixture.detectChanges();
            expect(fixture.nativeElement).toHaveModal(['foo']);
            expect(document.activeElement).toBe(ngbModalWindow1);
 
-           ngbModalWindow1.dispatchEvent(createKeyEvent(Key.Escape));
+           ngbModalWindow1.dispatchEvent(createKeyEvent(Key.Escape, {type: 'keydown'}));
            tick(16);  // RAF in escape handling
            fixture.detectChanges();
            expect(fixture.nativeElement).not.toHaveModal();
@@ -580,7 +580,7 @@ describe('ngb-modal', () => {
            fixture.detectChanges();
            expect(fixture.nativeElement).toHaveModal('foo');
 
-           document.querySelector('ngb-modal-window').dispatchEvent(createKeyEvent(Key.Escape));
+           document.querySelector('ngb-modal-window').dispatchEvent(createKeyEvent(Key.Escape, {type: 'keydown'}));
            tick(16);  // RAF in escape handling
            fixture.detectChanges();
            expect(fixture.nativeElement).not.toHaveModal();
@@ -591,7 +591,7 @@ describe('ngb-modal', () => {
            fixture.detectChanges();
            expect(fixture.nativeElement).toHaveModal('foo');
 
-           document.querySelector('ngb-modal-window').dispatchEvent(createKeyEvent(Key.Escape));
+           document.querySelector('ngb-modal-window').dispatchEvent(createKeyEvent(Key.Escape, {type: 'keydown'}));
            tick(16);  // RAF in escape handling
            fixture.detectChanges();
            expect(fixture.nativeElement).toHaveModal();

diff --git a/src/util/autoclose.ts b/src/util/autoclose.ts
@@ -39,7 +39,7 @@ export function ngbAutoClose(
         }
       };
 
-      const escapes$ = fromEvent<KeyboardEvent>(document, 'keyup')
+      const escapes$ = fromEvent<KeyboardEvent>(document, 'keydown')
                            .pipe(
                                takeUntil(closed$),
                                // tslint:disable-next-line:deprecation