diff options
author | Johann-S <johann.servoire@gmail.com> | 2019-07-28 12:49:44 +0300 |
---|---|---|
committer | Johann-S <johann.servoire@gmail.com> | 2019-07-28 13:11:10 +0300 |
commit | 2ea71a9e782000a5abe7916204ab694d993a9415 (patch) | |
tree | 49706b02d920559c3e5359bac383f7c9cd2b67e5 /js | |
parent | f4e297c878c89483d64f03381eb5c3f999083604 (diff) |
allow dynamic modal body for scrollable modals
Diffstat (limited to 'js')
-rw-r--r-- | js/src/modal/modal.js | 5 | ||||
-rw-r--r-- | js/src/modal/modal.spec.js | 21 |
2 files changed, 22 insertions, 4 deletions
diff --git a/js/src/modal/modal.js b/js/src/modal/modal.js index a0e460f228..5d74249374 100644 --- a/js/src/modal/modal.js +++ b/js/src/modal/modal.js @@ -243,6 +243,7 @@ class Modal { _showElement(relatedTarget) { const transition = this._element.classList.contains(ClassName.FADE) + const modalBody = SelectorEngine.findOne(Selector.MODAL_BODY, this._dialog) if (!this._element.parentNode || this._element.parentNode.nodeType !== Node.ELEMENT_NODE) { @@ -254,8 +255,8 @@ class Modal { this._element.removeAttribute('aria-hidden') this._element.setAttribute('aria-modal', true) - if (this._dialog.classList.contains(ClassName.SCROLLABLE)) { - SelectorEngine.findOne(Selector.MODAL_BODY, this._dialog).scrollTop = 0 + if (this._dialog.classList.contains(ClassName.SCROLLABLE) && modalBody) { + modalBody.scrollTop = 0 } else { this._element.scrollTop = 0 } diff --git a/js/src/modal/modal.spec.js b/js/src/modal/modal.spec.js index ed881f1682..5111f00a9a 100644 --- a/js/src/modal/modal.spec.js +++ b/js/src/modal/modal.spec.js @@ -396,8 +396,6 @@ describe('Modal', () => { const modalBody = modalEl.querySelector('.modal-body') const modal = new Modal(modalEl) - spyOn(modal, 'hide').and.callThrough() - modalEl.addEventListener('shown.bs.modal', () => { expect(modalBody.scrollTop).toEqual(0) done() @@ -406,6 +404,25 @@ describe('Modal', () => { modal.show() }) + it('should set .modal\'s scroll top to 0 if .modal-dialog-scrollable and modal body do not exists', done => { + fixtureEl.innerHTML = [ + '<div class="modal fade">', + ' <div class="modal-dialog modal-dialog-scrollable">', + ' </div>', + '</div>' + ].join('') + + const modalEl = fixtureEl.querySelector('.modal') + const modal = new Modal(modalEl) + + modalEl.addEventListener('shown.bs.modal', () => { + expect(modalEl.scrollTop).toEqual(0) + done() + }) + + modal.show() + }) + it('should not enforce focus if focus equal to false', done => { fixtureEl.innerHTML = '<div class="modal fade"><div class="modal-dialog" /></div>' |