4.3: modal-dialog-scrollable prevents modal from displaying when modal-body is missing
Created by: ZenRun
In bootstrap 4.3 modal-dialog-scrollable was introduced. When used, bootstrap.js always tries to set scrollTop = 0 on the .modal-body
if ($(this._dialog).hasClass(ClassName$5.SCROLLABLE)) { this._dialog.querySelector(Selector$5.MODAL_BODY).scrollTop = 0; }
If the modal-body class is missing (say when dynamic content was loaded into the modal-content and the backend threw an error message, not wrapped in a modal-body), the browser will not display the modal at all and instead throw the error
Cannot set property 'scrollTop' of null`
chrome 74
null is not an object (evaluating 'this._dialog.querySelector(de).scrollTop=0')
safari Version 12.1.1
See this pen for an example https://codepen.io/Bugreviews/pen/MMKzZv click the button and watch the developer console
A simply solution is to check if the modal body is available with the following code.
if ($(this._dialog).hasClass(ClassName$5.SCROLLABLE)) { if(this._dialog.querySelector(Selector$5.MODAL_BODY)) { this._dialog.querySelector(Selector$5.MODAL_BODY).scrollTop = 0; } }