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.



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue

  • 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
Tags