rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-01 13:24:25 +01:00
Code Issues Actions Packages Releases Activity

allow dynamic modal body for scrollable modals

Browse Source
This commit is contained in:
Johann-S 2019-07-28 11:49:44 +02:00
parent f4e297c878
commit 2ea71a9e78
2 changed files with 22 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
js/src/modal/modal.js
View File

@ -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
}

21
js/src/modal/modal.spec.js
View File

@ -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>'