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