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

Keyboard events in modal and autoclose handling use 'keydown' instead of 'keyup' Fixes #3439
ng-bootstrap · Nov 8, 2019 · 5977dcb · 5977dcb
1 parent c08e3b4
commit 5977dcb
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 7 deletions.
diff --git a/src/modal/modal-window.spec.ts b/src/modal/modal-window.spec.ts
@@ -107,7 +107,7 @@ describe('ngb-modal-dialog', () => {
         done();
       });
 
-      fixture.nativeElement.dispatchEvent(createKeyEvent(Key.Escape));
+      fixture.nativeElement.dispatchEvent(createKeyEvent(Key.Escape, {type: 'keydown'}));
     });
   });
 

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
@@ -43,7 +43,7 @@ export function ngbAutoClose(
         }
       };
 
-      const escapes$ = fromEvent<KeyboardEvent>(document, 'keyup')
+      const escapes$ = fromEvent<KeyboardEvent>(document, 'keydown')
                            .pipe(
                                takeUntil(closed$),
                                // tslint:disable-next-line:deprecation