Shift-Tab in modal causes background to scroll

[pdeffendol]

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

When creating and opening a modal via JavaScript, I am experiencing an oddity with keyboard navigation:

1. Open the modal (in my case it includes a close button in the heading)
2. Observe that using Tab to navigate places focus on the close button
3. Use Shift-Tab to navigate backwards. The focus visibly stays on the close button as it's the first and only focusable element inside the modal, but the underlying page scrolls down to the bottom (probably because that's where the modal lies in the overall DOM)

Expected behavior:

• Using Shift-Tab does not cause body scrolling

Based on investigation it appears that focus temporarily moves to something in the main page before the focus trap resets it to the modal's close button. Will post more detail here if I find it.

Reduced test cases

See issue description

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

Windows

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

Microsoft Edge, Chrome

What version of Bootstrap are you using?

5.3.8

[pdeffendol]

ALso noticed that if the last focusable element on the underlying page is an iframe, then the focus trap does not work - using Shift-Tab will place focus on the iframe.

[pdeffendol]

More observations:

• If the modal is the last element on the page, then using Tab will move focus past the modal to the browser's UI
• If the modal is the first element on the page, then using Shift-Tab will move focus outside the modal to the browser's top UI
• In either case, there is a brief moment that focus can go outside the modal to another element in the DOM, which the browser will automatically scroll into view before trapping the focus back to the modal. I am not sure how to override this seemingly default browser behavior.

[pdeffendol]

Only way to fix this seems to be capturing keydown events instead of focusin events

[Ayoub-Benramdane]

Thanks for opening this issue.
I noticed a similar behavior before, and in my case it seemed related to focus handling.
Maybe checking how focus is temporarily moved outside the modal could help.