boostrap modal backdrop freezing

Question

We're using bootstrap modals - bs-modal - in some admin areas of our application. And in some cases the bs-modal-backdrop appears to freeze-up the page after closing the modal.

More specifically, "freeze up" meaning that the bs-modal-backdrop element doesn't actually get removed from the DOM. And the opacity remains at 0.5 - so my page is dead (even though the modal itself has already been closed).

VERSION: "bootstrap": "^4.4.1"

Here's what it looks like when I successfully recreate the issue - i.e. the modal has been closed, but the backdrop covers my entire page):

You can see the bs-modal-backdrop element in the DOM, and the .modal-backdrop.show opacity: 0.5 .

My HTML template looks like this:

<div
  bsModal
  #siteConfigModal="bs-modal"
  class="modal hide show"  
  [config]="{ backdrop: true }"
  (onShown)="onShownEvent('onShown', $event)"
>
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h4 *ngIf="isEditing" class="modal-title pull-left">Edit {{ selectedNodeTypeStr }}</h4>
        <h4 *ngIf="isAdding" class="modal-title pull-left">Add New {{ selectedNodeTypeStr }}</h4>

        <button type="button" class="close" (click)="cancelEdit()" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
       
      </div>
    </div>
  </div>
</div>

In my Angular component, I have a ref to the ViewChild:

 @ViewChild('siteConfigModal', { static: true }) private readonly configModal: ModalDirective;

And when the save event has completed, I close the modal:

 onSaveEdit(event): void {
    this.configModal.hide();
 }

Perhaps there's a race condition that I'm not finding yet, or some css class conflict.

Thanks in advance.