bootstrap 4 modal not closing after calling hide

Question

Overview

During an ajax call the progress modal is displayed, then upon completion or failure it should be hidden by calling $("#progessDialog").modal("hide");. It appears that the hide event isn't firing. I have an event hook in the ajax fail handler defined to log when the hide event is fired and it never logs but another log prints as expected for that condition:

   $('#progessDialog').on('hidden.bs.modal', function (e) {
       console.log('calling modal hide');
   });

Steps to reproduce:

• click on one of the values (555 or 222) to trigger the inline editing
• change the value
• tab out

Funny thing

After the modal refuses to hide and the js call has completed, when I enter $("#progessDialog").modal("hide") in the dev console, the modal hides as expected.

NOTE: Not finished so don't rag on the UI just yet, however, I'm open to some constructive criticism to improve on UX/JS. There's zero validation, that comes next.

I've seen several other SO questions that are similar in nature but not really the same (those questions seem to have some of the modal hidden but not the backdrop - my case is the full modal).

Here'a a js fiddle reproducing the issue: https://jsfiddle.net/willtx/8dpL5rLd/29/

Modal

  <div class="modal fade" id="progessDialog" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="progessDialog" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    <h5 class="modal-title" id="progessDialoglLabel">Processing...</h5>
                    <div class="progress">
                        <div class="progress-bar progress-bar-striped bg-info" role="progressbar" style="width: 100%" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
                    </div>
                </div>
            </div>
        </div>

Answer 1

At the end, the solution for this is quite simple.
As it is stated in the Bootstrap docs about .modal('show'), the call returns to the caller before the modal has actually been shown (i.e. before the shown.bs.modal event occurs).

In your case this means, that when you give the order to the modal to open up, it starts to open up, but right after that, the execution continues with your other code. So at the end of your operations, when you call the .modal('hide') method, the modal actually did not finished to load up completely. In order to get around this, you could watch for the shown.bs.modal event, when the modal has finished loading, and just then call .modal('hide').

Also, as you want to close the modal at various places, could be convenient to write up a function that handles the closing of the modal. Something like the one below.

function closeModal() {
    $('#progessDialog').on('shown.bs.modal', function(e) {
        $("#progessDialog").modal("hide");
    });
}

Here is your fiddle with the suggested modification: https://jsfiddle.net/dferenc/5wehfss9/