react-bootstrap
Keyboard input Tab + Shift escapes Modal's focus
Prerequisites
- [X] I am using the correct version of React-Bootstrap for my version of Bootstrap
- [X] I have searched for duplicate or closed issues
- [X] I have read the contributing guidelines
Describe the bug
With the React Bootstrap modal open, attempt to move around with your keyboard using Shift + Tab. The elements from the background of the modal which should be out of focus start getting focused.
Expected behavior
Using Shift + Tab should keep the focus on the elements within the modal
To Reproduce
No response
Reproducible Example
https://codesandbox.io/p/sandbox/youthful-grothendieck-fzppl5
Screenshots
No response
What operating system(s) are you seeing the problem on?
No response
What browser(s) are you seeing the problem on?
No response
What version of React-Bootstrap are you using?
2.7.2
What version of Bootstrap are you using?
5.2.3
Additional context
No response
Can you provide an updated sandbox link? The current link says "not found"
Hi can you please try it again. I realized it was in my drafts and couldn't be seen by someone else. Thanks!
Link https://codesandbox.io/p/sandbox/youthful-grothendieck-fzppl5
When you shift tab, the base modal captures the key press and ends up focusing on the modal dialog div, although that's been set with a tabindex of -1: https://github.com/react-restart/ui/blob/main/src/Modal.tsx#L383
Seems like this should be targeting the last focusable element within the modal though. @jquense was there a reason for focusing on the modal dialog div?