vue-loading-overlay: Maximum call stack size exceeded, bootstrap modal

<b-modal id="order" size="lg" scrollable title="" :no-enforce-focus="true">

:no-enforce-focus=“true” is solution!!

Had to set no-enforce-focus bootstrap-vue b-modal component. Try focus = false with modal options or the data-focus=false attribute on the modal.

https://bootstrap-vue.js.org/docs/components/modal/

This error occurs when we show then hide the loading a few time or when another bootstrap modal or sweet alert is about to show alongside with the loading.

The error log is:

Uncaught RangeError: Maximum call stack size exceeded.
    at HTMLDocument.<anonymous> (modal.js:289)
    at HTMLDocument.dispatch (jquery.min.js:2)
    at HTMLDocument.y.handle (jquery.min.js:2)
    at Object.trigger (jquery.min.js:2)
    at Object.simulate (jquery.min.js:2)
    at HTMLDocument.n (jquery.min.js:2)
    at a.focusIn (vue-loading-overlay@3:1)
    at HTMLDocument.<anonymous> (modal.js:289)
    at HTMLDocument.dispatch (jquery.min.js:2)
    at HTMLDocument.y.handle (jquery.min.js:2)

Try deleting the tabindex=“-1” from the modals.

Since the sidebar that I use has the z-index of 1100 I’ve change my style to:

/**
* Bootstrap Modal
*/
.modal {
    z-index: 1101 !important;
}

/**
* Vue Sweet Alert
*/
.swal-overlay{
    z-index: 1102 !important;
}

/**
* Vue Loading
*/
.vld-overlay.is-full-page {
    z-index: 1103 !important;
}

And it seems work well now, but my team will have to test all pages. Hoping it works 100%.

I had a similar issue and performing NoCodeMonkey suggestion to set no-enforce-focus worked for me. Thanks