Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

BsModalRef closed the wrong Dropback #6591

Open
ghost opened this issue Jul 3, 2023 · 2 comments
Open

BsModalRef closed the wrong Dropback #6591

ghost opened this issue Jul 3, 2023 · 2 comments

Comments

@ghost
Copy link

ghost commented Jul 3, 2023

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
Copy link

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
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants