diff --git a/js/src/modal.js b/js/src/modal.js index 054750c5f7..ea8e0a0463 100644 --- a/js/src/modal.js +++ b/js/src/modal.js @@ -69,6 +69,8 @@ class Modal extends BaseComponent { this._isShown = false this._isTransitioning = false this._scrollBar = new ScrollBarHelper() + + this._addEventListeners() } // Getters @@ -111,9 +113,6 @@ class Modal extends BaseComponent { this._adjustDialog() - this._toggleEscapeEventListener(true) - this._toggleResizeEventListener(true) - this._backdrop.show(() => this._showElement(relatedTarget)) } @@ -130,10 +129,6 @@ class Modal extends BaseComponent { this._isShown = false this._isTransitioning = true - - this._toggleEscapeEventListener(false) - this._toggleResizeEventListener(false) - this._focustrap.deactivate() this._element.classList.remove(CLASS_NAME_SHOW) @@ -217,12 +212,7 @@ class Modal extends BaseComponent { this._queueCallback(transitionComplete, this._dialog, this._isAnimated()) } - _toggleEscapeEventListener(enable) { - if (!enable) { - EventHandler.off(this._element, EVENT_KEYDOWN_DISMISS) - return - } - + _addEventListeners() { EventHandler.on(this._element, EVENT_KEYDOWN_DISMISS, event => { if (event.key !== ESCAPE_KEY) { return @@ -236,15 +226,12 @@ class Modal extends BaseComponent { this._triggerBackdropTransition() }) - } - _toggleResizeEventListener(enable) { - if (enable) { - EventHandler.on(window, EVENT_RESIZE, () => this._adjustDialog()) - return - } - - EventHandler.off(window, EVENT_RESIZE) + EventHandler.on(window, EVENT_RESIZE, () => { + if (this._isShown && !this._isTransitioning) { + this._adjustDialog() + } + }) } _hideModal() { diff --git a/js/tests/unit/modal.spec.js b/js/tests/unit/modal.spec.js index a04eb2cc2c..bf26377fe8 100644 --- a/js/tests/unit/modal.spec.js +++ b/js/tests/unit/modal.spec.js @@ -438,10 +438,10 @@ describe('Modal', () => { const modalEl = fixtureEl.querySelector('.modal') const modal = new Modal(modalEl) - spyOn(modal, '_adjustDialog').and.callThrough() + const spy = spyOn(modal, '_adjustDialog').and.callThrough() const expectDone = () => { - expect(modal._adjustDialog).toHaveBeenCalled() + expect(spy).toHaveBeenCalled() resolve() }