Bootstrap 5 modal .fade does not finish hide animation if element within it is focused

[suneettipirneni]

Whenever closing a .fade modal the animation should complete fully, however when an element in the modal is focused this is not the case. I can successfully reproduce this issue by using the any one of the bootstrap 5 modal examples that have .fade. The difference is hard to see at first glance so I attached slowed down videos of the two animations to identify the discrepancies.

Closing modal with no element focused:

nonFocusAnimation.mp4

As you can see the animation finishes and executes properly.

Closing modal with element within it focused:

focusAnimation.mp4

Here the animation starts, but then gets interrupted and suspends.

• Operating system and version
  macOS Big Sur 11.2
• Browser and version
  Safari 14.0.3

Bootstrap 5.0.0-beta1

• A reduced test case or suggested fix using CodePen or JS Bin

https://getbootstrap.com/docs/5.0/components/modal/#varying-modal-content

[mdo]

Possibly a duplicate of #34055?

[alpadev]

@mdo I think this issue is fixed by #33845.