Topic: Dynamic Modals close only the first time properly / backdrop remains
Wilde pro asked 5 years ago
Expected behavior
Modals should close properly and remove backdrop.
Actual behavior
I created multiple modules with lazy loading and in each module I can launch several modals and I can open and close them as often as I want without any problems. But once I navigate to a different module and then come back to the other module I can open any module but the backdrop (dark overlay) remains. I actually debugged it and I found out that _this.mdbModalService.getModalsCount()
the first time (when the modal is working) it returns 1
and the second time it returns 0
. Maybe it is also not imported as a singleton and that's why it is not working properly.
Resources (screenshots, code snippets etc.)
``` // material.module.ts (I import this module into each module) @NgModule({ imports: [ ModalModule.forRoot(), ... ], exports: [ ModalModule, ... ]
// example.module.ts imports: [ SharedModule, // imports MaterialModule ], entryComponents: [CreateRoleModalComponent, DeleteRoleModalComponent, EditRoleModalComponent] // multiple dynamic modals
// example.component.ts
constructor( private modalService: MDBModalService, ) { }
openCreateRoleModal() { const modalRef = this.modalService.show(CreateRoleModalComponent); modalRef.content.roleCreated.subscribe((result: boolean) => { this.loadRoles(); }); }
```
Arkadiusz Idzikowski staff answered 5 years ago
Thank you for reporting this problem. We will take a closer look at it.
Giovanni De Stefano priority commented 5 years ago
Do you have any feedback on this?
In my case the backdrop stays there randomly: the interface scrolls but I cannot interact with it (as it is behind the blackdrop).
Any idea how to fix it?
Leardi priority commented 5 years ago
Still looking for a fix for this. Any updates ?
Arkadiusz Idzikowski staff commented 5 years ago
Unfortunately this problem is not fixed yet. The only workaround for now would be to add modal module with 'forRoot()' method to the root module (but then, the module won't be lazy loaded).
ecossio free commented 5 years ago
Hi, Any updates on this? I have the same problem.
Arkadiusz Idzikowski staff commented 5 years ago
This problem is not fixed yet. Please move your modal module from lazy loaded modules to root module.
ecossio free commented 5 years ago
Hi, any examples of how to workaround this? I could not solve it, any snippet ?
Arkadiusz Idzikowski staff commented 5 years ago
This problem was fixed in version 8.1.0. If you can't upgrade to v8 the only 'workaround' would be to import modal module only once in your root module.
ecossio free commented 5 years ago
Thank you! i will try the updated version.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- ForumUser: Pro
- Premium support: No
- Technology: MDB Angular
- MDB Version: 7.4.3
- Device: toshiba satellite z30-a-177
- Browser: Chrome
- OS: Ubuntu 18.10
- Provided sample code: Yes
- Provided link: No