mdb-modal-backdrop being created twice for a modal dialog


Topic: mdb-modal-backdrop being created twice for a modal dialog

Flávio Tobias asked 6 years ago

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
this.dialog.show();
 
//Close
this.dialog.hide();

Damian Gemza staff answered 6 years ago

Dear @Flávio Tobias 

How can I reproduce this problem?

I have tried to reproduce it, but in 20 open of modal, there wasn't a case with a doubled backdrop.

Best Regards,

Damian


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 6.2.2
  • Device: PC
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: Yes
  • Provided link: No