I have a problem that happens randomly. I have a modal dialog, html and TS code below. When I open the dialog sometimes the "mdb-modal-backdrop" component is inserted twice and when the dialog is closed one instance is removed and one still active. So I cannot access any other component on the screen since it blocks the entire screen, in this case I have to refresh the page in order to make it disappear. I would like to know if there is something I should be doing in order to fix this.

HTML Code:

<div mdbModal #userProfileModal="mdb-modal" class="modal fade" id="frameModalTop" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel2" aria-hidden="true">
<div class="modal-dialog" role="document">

<!--Content-->
<div class="modal-content">

<!--Header-->
<div class="modal-header light-blue darken-3 white-text">

.....

</div>
<div class="modal-body mb-0" style='overflow-y: auto; max-height: 80vh'>
.....
</div>
</div>
</div>
</div>

TS Code:

@ViewChild('userProfileModal') public dialog: ModalDirective;

....

//Open

//Close