.hide() won't dismiss modal if fade class is present

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

If a modal has the fade class on it then it won’t respond to a call to the .hide() method.

This modal

<div class="modal fade" id="loadingModal" tabindex="-1" aria-hidden="true">
  
  <div class="modal-dialog">
      
    <div class="modal-content">
        
      <div class="modal-header">
        <h5 class="modal-title" id="staticBackdropLabel">Loading </h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      
      <div class="modal-body" id="loadingModalText">
        Loading JSON and HTML data for the document.
      </div>

    </div>
    
  </div>
  
</div>

Will respond to the .show() method but when called using the .hide() method it will not dismiss.

The only way to get this to work is to remove the fade class from the modal.

I am declaring the modal with this code

        this.loadingModal = new bootstrap.Modal(document.getElementById('loadingModal'), {
            backdrop:"static",
            keyboard:false,
            focus:true
        });

and then using this code (obviously in different functions) to show and hide it

this.loadingModal.hide();

this.loadingModal.show();

Reduced test cases

I tried to build a test case but CodPen and JS Bin have an issue with modal display.

I have this issue on two projects. One using Bootstrap via npm and the other using the code via the CDN.

What operating system(s) are you seeing the problem on?

Windows, macOS, iOS

What browser(s) are you seeing the problem on?

Safari, Firefox

What version of Bootstrap are you using?

Bootstrap v5.1.3

[GeoSot]

Hey @lolbat do me a favor. As your modal is animated you have to listen to the proper events before trigger the next action.

Try use something like:

this.loadingModal.show();
document.getElementById('loadingModal')l.addEventListener('shown.bs.modal', function (event) {
   this.loadingModal.hide();
})

[mdo]

Revisiting this quite late, but I’m not sure what we need to add to the docs here as this 1) doesn’t seem super widespread of a problem, and 2) feels pretty standard when dealing with animations (you can’t interrupt them or act on an animating element until it’s done animating I believe).