Backport #29155

allow dynamic modal body for scrollable modals

diff --git a/js/src/modal.js b/js/src/modal.js
index 99fe1bf2d085caa62a780fd5388832f92eaed64a..d6abfdec871bb87ce50501831d62203eeac49b7f 100644 (file)
--- a/js/src/modal.js
+++ b/js/src/modal.js
@@ -236,6 +236,7 @@ class Modal {
 
   _showElement(relatedTarget) {
     const transition = $(this._element).hasClass(ClassName.FADE)
+    const modalBody = this._dialog ? this._dialog.querySelector(Selector.MODAL_BODY) : null
 
     if (!this._element.parentNode ||
         this._element.parentNode.nodeType !== Node.ELEMENT_NODE) {
@@ -247,8 +248,8 @@ class Modal {
     this._element.removeAttribute('aria-hidden')
     this._element.setAttribute('aria-modal', true)
 
-    if ($(this._dialog).hasClass(ClassName.SCROLLABLE)) {
-      this._dialog.querySelector(Selector.MODAL_BODY).scrollTop = 0
+    if ($(this._dialog).hasClass(ClassName.SCROLLABLE) && modalBody) {
+      modalBody.scrollTop = 0
     } else {
       this._element.scrollTop = 0
     }

diff --git a/js/tests/unit/modal.js b/js/tests/unit/modal.js
index f14ef3290acb1c60a2e4e996ec88e585b07b110e..d22d8a1de7c365d636dcc46582bada4699a7be09 100644 (file)
--- a/js/tests/unit/modal.js
+++ b/js/tests/unit/modal.js
@@ -812,4 +812,25 @@ $(function () {
     })
       .bootstrapModal('show')
   })
+
+  QUnit.test('should set .modal\'s scroll top to 0 if .modal-dialog-scrollable and modal body do not exists', function (assert) {
+    assert.expect(1)
+    var done = assert.async()
+
+    var $modal = $([
+      '<div id="modal-test">',
+      '  <div class="modal-dialog modal-dialog-scrollable">',
+      '    <div class="modal-content">',
+      '    </div>',
+      '  </div>',
+      '</div>'
+    ].join('')).appendTo('#qunit-fixture')
+
+
+    $modal.on('shown.bs.modal', function () {
+      assert.strictEqual($modal.scrollTop(), 0)
+      done()
+    })
+      .bootstrapModal('show')
+  })
 })