Scrollable modal (#27769)

js/src/modal.js

@@ -51,6 +51,7 @@ const Event = {
 }
 
 const ClassName = {
+  SCROLLABLE         : 'modal-dialog-scrollable',
   SCROLLBAR_MEASURER : 'modal-scrollbar-measure',
   BACKDROP           : 'modal-backdrop',
   OPEN               : 'modal-open',
@@ -60,6 +61,7 @@ const ClassName = {
 
 const Selector = {
   DIALOG         : '.modal-dialog',
+  MODAL_BODY     : '.modal-body',
   DATA_TOGGLE    : '[data-toggle="modal"]',
   DATA_DISMISS   : '[data-dismiss="modal"]',
   FIXED_CONTENT  : '.fixed-top, .fixed-bottom, .is-fixed, .sticky-top',
@@ -244,7 +246,12 @@ class Modal {
     this._element.style.display = 'block'
     this._element.removeAttribute('aria-hidden')
     this._element.setAttribute('aria-modal', true)
-    this._element.scrollTop = 0
+
+    if ($(this._dialog).hasClass(ClassName.SCROLLABLE)) {
+      this._dialog.querySelector(Selector.MODAL_BODY).scrollTop = 0
+    } else {
+      this._element.scrollTop = 0
+    }
 
     if (transition) {
       Util.reflow(this._element)

js/tests/unit/modal.js

@@ -790,4 +790,31 @@ $(function () {
     })
       .bootstrapModal('show')
   })
+
+  QUnit.test('should scroll to top of the modal body if the modal has .modal-dialog-scrollable class', function (assert) {
+    assert.expect(2)
+    var done = assert.async()
+
+    var $modal = $([
+      '<div id="modal-test">',
+      '  <div class="modal-dialog modal-dialog-scrollable">',
+      '    <div class="modal-content">',
+      '      <div class="modal-body" style="height: 100px; overflow-y: auto;">',
+      '        <div style="height: 200px" />',
+      '      </div>',
+      '    </div>',
+      '  </div>',
+      '</div>'
+    ].join('')).appendTo('#qunit-fixture')
+
+    var $modalBody = $('.modal-body')
+    $modalBody.scrollTop(100)
+    assert.strictEqual($modalBody.scrollTop(), 100)
+
+    $modal.on('shown.bs.modal', function () {
+      assert.strictEqual($modalBody.scrollTop(), 0, 'modal body scrollTop should be 0 when opened')
+      done()
+    })
+      .bootstrapModal('show')
+  })
 })