Modal closes when clicking on a dynamically inserted element using AngularJS

[azmith10k]

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

I encountered this issue while adding Bootstrap v5.2.1 to a legacy codebase that runs using AngularJS v1.8.3.

The library swap went smooth for 5.2.0, but ever since 5.2.1 there has been an issue with the last element rendered with a scoped array variable using AngularJS' ng-repeat directive whose click action directly manipulates the aforementioned variable.

I have linked to a reduced test case for the same.

It would be nice if you guys can find the issue, but I can understand if you chose not to since AngularJS is way past LTS.

PS: While debugging, I noticed that switching data-bs-backdrop to static prevented the issue - meaning Bootstrap is probably thinking that the element is probably outside the modal.

Reduced test cases

Codepen link to the replicated issue

What operating system(s) are you seeing the problem on?

Windows, macOS, Linux

What browser(s) are you seeing the problem on?

Chrome, Safari, Firefox

What version of Bootstrap are you using?

v5.2.1

[GeoSot]

Hey @azmith10k. Check this please #37128

You can also try this script if it solves your problem
https://deploy-preview-37128--twbs-bootstrap.netlify.app/docs/5.2/dist/js/bootstrap.bundle.min.js

[azmith10k]

Hey @GeoSot! Thanks for your swift response.

Checked out the bundle from that PR and it worked as intended. I will close this issue.