diff --git a/src/ui/public/modals/__tests__/confirm_modal.js b/src/ui/public/modals/__tests__/confirm_modal.js index 3332028848e69..7cc8904f157c5 100644 --- a/src/ui/public/modals/__tests__/confirm_modal.js +++ b/src/ui/public/modals/__tests__/confirm_modal.js @@ -125,14 +125,13 @@ describe('ui/modals/confirm_modal', function () { showClose: true }; - function resetSpyCounts() { + beforeEach(() => { confirmCallback.reset(); closeCallback.reset(); cancelCallback.reset(); - } + }); it('onClose', function () { - resetSpyCounts(); confirmModal('hi', confirmModalOptions); $rootScope.$digest(); findByDataTestSubj('confirmModalCloseButton').click(); @@ -143,7 +142,6 @@ describe('ui/modals/confirm_modal', function () { }); it('onCancel', function () { - resetSpyCounts(); confirmModal('hi', confirmModalOptions); $rootScope.$digest(); findByDataTestSubj('confirmModalCancelButton').click(); @@ -154,7 +152,6 @@ describe('ui/modals/confirm_modal', function () { }); it('onConfirm', function () { - resetSpyCounts(); confirmModal('hi', confirmModalOptions); $rootScope.$digest(); findByDataTestSubj('confirmModalConfirmButton').click(); @@ -166,7 +163,6 @@ describe('ui/modals/confirm_modal', function () { it('onClose defaults to onCancel if not specified', function () { - resetSpyCounts(); const confirmModalOptions = { confirmButtonText: 'bye', onConfirm: confirmCallback, @@ -182,5 +178,39 @@ describe('ui/modals/confirm_modal', function () { expect(confirmCallback.called).to.be(false); expect(cancelCallback.called).to.be(true); }); + + it('onKeyDown detects ESC and calls onCancel', function () { + const confirmModalOptions = { + confirmButtonText: 'bye', + onConfirm: confirmCallback, + onCancel: cancelCallback, + title: 'hi' + }; + + confirmModal('hi', confirmModalOptions); + + const e = angular.element.Event('keydown'); // eslint-disable-line new-cap + e.keyCode = 27; + angular.element(document.body).trigger(e); + + expect(cancelCallback.called).to.be(true); + }); + + it('onKeyDown ignores keys other than ESC', function () { + const confirmModalOptions = { + confirmButtonText: 'bye', + onConfirm: confirmCallback, + onCancel: cancelCallback, + title: 'hi' + }; + + confirmModal('hi', confirmModalOptions); + + const e = angular.element.Event('keydown'); // eslint-disable-line new-cap + e.keyCode = 50; + angular.element(document.body).trigger(e); + + expect(cancelCallback.called).to.be(false); + }); }); }); diff --git a/src/ui/public/modals/confirm_modal.html b/src/ui/public/modals/confirm_modal.html index ad1b05dcd5b11..34a4eaae99a05 100644 --- a/src/ui/public/modals/confirm_modal.html +++ b/src/ui/public/modals/confirm_modal.html @@ -3,7 +3,6 @@
{{title}}
-
{ + if(event.keyCode === 27) { + confirmScope.onCancel(); + } + }); + modalInstance.find('[data-test-subj=confirmModalConfirmButton]').focus(); function destroy() { modalPopover.destroy(); modalPopover = undefined; + angular.element(document.body).off('keydown'); confirmScope.$destroy(); } }; diff --git a/src/ui/public/modals/modal_overlay.js b/src/ui/public/modals/modal_overlay.js index f7f4183f713f7..43cd5cda1f159 100644 --- a/src/ui/public/modals/modal_overlay.js +++ b/src/ui/public/modals/modal_overlay.js @@ -8,6 +8,7 @@ export class ModalOverlay { constructor(modalElement) { this.overlayElement = angular.element(modalOverlayTemplate); this.overlayElement.append(modalElement); + angular.element(document.body).append(this.overlayElement); }