allow dynamic modal body for scrollable modals

auro-star · Jul 28, 2019 · 2ea71a9 · 2ea71a9
1 parent f4e297c
commit 2ea71a9
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 4 deletions.
diff --git 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
@@ -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>'