Ngx-bootstrap: Closing second modal closes the first after upgrade to 6.1.0

[mrjohnr]

Bug description: I've upgraded from ngx-bootstrap:6.0.0 to 6.1.0, in my app I use a edit component shown inside a modal:
this.modalRef = this.modalService.show(EditDataComponent, { class: 'modal-dialog-centered', animated: false, keyboard: false, backdrop: 'static', initialState }); this.modalRef.content.outResult.subscribe(o => {
on EditDataComponent if I need to display a second modal (for a message or a selection) it is displayed but when I try to close it the main modal is closed instead(EditDataComponent ),second modals stays opened breaking the app,there is no error in console
reverting to ngx-bootstrap:6.0.0 above issue is gone

thanks

Versions of ngx-bootstrap, Angular, and Bootstrap:

ngx-bootstrap:6.1.0

Angular: 10.0.14

Bootstrap: 4.5.2

[daniloff200]

That maybe because of https://github.com/valor-software/ngx-bootstrap/pull/4254, and modal close logic was a little bit changed, if you check https://valor-software.com/ngx-bootstrap/#/modals#service-nested this demo

Maybe, you need some reworks in your code. Anyway, it will be really cool, if you can share some demo with me, and I'll try to help, to find out, is it an issue in the library, or, you have to make some changes in your codebase

[mrjohnr]

Seems that works if I'm using distinct Id for every modal and use it when closing,demo link above very helpful

[andrejm7]

please correct this .. this id control was horrible.

[federicobenedetti]

That maybe because of #4254, and modal close logic was a little bit changed, if you check https://valor-software.com/ngx-bootstrap/#/modals#service-nested this demo

Maybe, you need some reworks in your code. Anyway, it will be really cool, if you can share some demo with me, and I'll try to help, to find out, is it an issue in the library, or, you have to make some changes in your codebase

The demo is missing a lot of use cases though... It is taken for granted that the developer is able to write nested modals in the same template and is able to manually give ID to each one.
And the BsModalRef service seems like that i doesn't keep track of the modal stack, even though it exposes only a show/hide method.
Maybe reverting to the old logic?

Regards

[andrejm7]

I tried to use version 6.1.0 but with this problem of the modal it is not feasible to make adjustment in all my project.
unfortunately it was not practical.

regressed to version 5.XX

[andrejm7]

?????????????/

[andrejm7]

Any ?

[stLmpp]

@daniloff200

I created a repository to reproduce this: https://github.com/stLmpp/ngx-bootstrap-nested-modal.git

Install the dependencies, run ng serve, and click on the button "Open modal", then click on the button "Open child".
If you try to close the child, both modal will be closed.

The BsModalRef that I injected in both components (ModalComponent and ModalChildComponent), seems to have the same id

[amitzw]

This is breaking existing functionality, the bsModalRef should be able to close the correct modal.
Is there any plans for this fix?

[reznor244]

If there are multiple modals on screen without an id value, then closing one causes all of them to close. I believe in previous versions, it would still only close one, in which case existing functionality is broken. Worse than that, I also have an issue where at least one of the modals doesn't completely close and the div.modal-container is retained on screen and seems to eats up clicks that should fall through to the elements below (this behavior might have something to do with the ModalConfig options I used as well). This causes a "lock-up" where the user can't interact with the page. As a workaround, I wrapped BsModalService in my own service class and assign a random number to id before calling show(). This resolves the issue. It seems that BsModalService could take the same approach of assigning a random number value for id inside show() unless the developer has already explicitly set a truthy value.

[leo6104]

It breaks lots of nested modal behavior in my project. Please fix the bug.

it is an example about @reznor244 's method.

@Injectable()
export class CustomBsModalService extends BsModalService {
  show(content: any, config?: ModalOptions): BsModalRef {
    if (!config) config = {};
    config.id = (new Date()).getUTCMilliseconds();
    return super.show(content, config);
  }
}


@NgModule({
   ...
   providers: [
       { provide: BsModalService, useClass: CustomBsModalService },
   ],
})
export class AppModule {
}