valor-software / ngx-bootstrap

Fast and reliable Bootstrap widgets in Angular (supports Ivy engine)
https://valor-software.com/ngx-bootstrap
MIT License
5.52k stars 1.69k forks source link

BsModalRef closed the wrong Dropback #6591

Open clrockrock opened 1 year ago

clrockrock commented 1 year ago

Before opening an issue, please search for duplicates (opened and closed) https://github.com/valor-software/ngx-bootstrap/issues There's no need to open an issue here if you want to ask general question, use StackOverflow or Slack instead

Bug description:

Recently, I upgraded Angular from version 9 to version 15 and also synchronized ngx-bootstrap to version 10.3.0. After the upgrade, I noticed that when I use the bsModalService to consecutively display two components, the backdrop (overlay) doesn't appear for the second component. Upon examining my code, I found that the previous code was written as follows: bsModalService.show(AComponent). In the constructor of AComponent, I instantiated a private variable bsModalRef of type BsModalRef. Additionally, I imported InnerA in AComponent, and in the AComponent HTML file, I used <inner-a (onHide)="handleHide()">. In the constructor of InnerA, I also instantiated a private variable bsModalRef of type BsModalRef. At this point, when I trigger this.bsModalRef.hide() from InnerA, upon receiving the notification in AComponent, I trigger a message to display Component B. Now, if I call this.bsModalRef.hide() again in AComponent, it will close the backdrop for the upcoming Modal B, leaving only Component B without a backdrop.

After examining the source code, I found that in this scenario, the bsModalRef variable in AComponent is being used, and it closes the backdrop for Component B. The condition ModalCount === 1 in the source code leads to this issue. I believe this condition might not be reasonable in this case.

image image image

https://github.com/rockclock/NgxBoostrap-BsModalService

Versions of ngx-bootstrap, Angular, and Bootstrap:

ngx-bootstrap: 10.3.0

Angular: ^15.2.9

Bootstrap: ^5

Build system: Angular CLI, System.js, webpack, starter seed:

Expected behavior

When Component B is displayed, the backdrop will not be closed.

lkachun9129 commented 1 year ago

I am facing the same issue with Angular 16 and ngx-bootstrap 11.

Steps:

  1. Show modal A
  2. Hide modal A and Show modal B immediately

Actual behavior: Backdrop is missing for modal B.

liuyankit commented 3 months ago

Any update on this? It's breaking all my tests since upgrading to Angular 16