Maximum call stack size exceeded, bootstrap modal

[azambiez]

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)

[ankurk91]

Well, this was not helpful. Please share a minimal re-pro to demonstrate the issue

[azambiez]

Well, this was not helpful. Please share a minimal re-pro to demonstrate the issue

Sorry! And now I've updated the description. Thanks.

[ankurk91]

Can you share that piece of code?

[azambiez]

App.vue

    <div>
        <component :is="layout">
            <router-view />
        </component>
        <loading :active.sync="$store.state.loading.status" />
    </div>

Index.vue

    <div class="modal fade" id="viewModal" tabindex="-1" role="dialog" aria-labelledby="vehicleModalTitle" aria-hidden="true">
                <div class="modal-dialog modal-lg" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="vehicleModalTitle">{{ $t('label.vehicle') }}</h5>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <div class="table-responsive">
                                <table class="table table-bordered mb-0">
                                    <thead>
                                        <tr>
                                            <th style="width: 1%;"></th>
                                            <th>{{$t('label.type')}}</th>
                                            <th>{{$t('label.lodgement_office_code')}}</th>
                                            <th>{{$t('label.lodgement_office_date')}}</th>
                                            <th>{{$t('label.destination_office_code')}}</th>
                                            <th>{{$t('label.destination_office_date')}}</th>

                                        </tr>
                                    </thead>
                                    <tbody  >
                                        <tr v-for="(item,key) in history" :key="item.id">
                                            <td>{{key+1}}</td>
                                            <td>{{item.registration_type}}</td>
                                            <td>{{item.lodgement_office_code}}</td>
                                            <td>{{item.lodgement_office_date}}</td>
                                            <td>{{item.destination_office_code}}</td>
                                            <td>{{item.destination_office_date}}</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">{{ $t('label.close') }}</button>
                        </div>
                    </div>
                </div>
            </div>

And Script:

    viewDetail(uuid){
            this.$store.state.loading.status = true;
            let url = this.baseURI + '/some-url/'+ uuid +'/history';
            backend.requestApi("GET",url)
            .then(respone => {
                this.history = respone.data;
                this.$store.state.loading.status = false;
                $('#viewModal').modal('show');
            });
        },

[ankurk91]

Here is the js-fiddle that re-produce this issue https://jsfiddle.net/69g5j0oh/

This is happening because vue-loading-overlay don't allow any other element to be focusable while it is active. But in your case, bootstrap modal is active and when you try to close the modal (by clicking on close button), bootstrap js also hooks into focusin event and try to focus to that element (close button).

https://github.com/twbs/bootstrap/blob/d1067d7c35877588e27d3a559802f8606ba36120/js/src/modal.js#L282-L292

[ankurk91]

The only solution right now is to make loader to appear on top of modal by increasing the z-index to 1051

P.S - No it didnt worked either, i don't have other solution (as of now), i might need to make the vue-loading-overlay behaviour optional.

[azambiez]

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%.

[renanbarbalho]

any sugestions to solve this case? Any old anwser solve to my case.

[azambiez]

Modifying the z-index just like I did. It works fine.

[renanbarbalho]

Sorry man, but this solution doesn't works.

[NoCodeMonkey]

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/

[sps-smith]

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

[twoshlove]

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

:no-enforce-focus="true" is solution!!

[shamiul-anik]

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.

[rwaddin]

I have tried :

• change z-index
• add focus attribute = false
• add data focus attribute = false
• remove tabindex="-1"

but still can't

fyi

• "vue-loading-overlay": "^5.0.3",
• "bootstrap": "^5.2.1",
• "vue": "^3.2.39",

[ankurk91]

You can set enforce-focus prop to false.