Topic: Modal prevent tabbing / focus trap
Expected behavior Not sure if i'm the only one getting this but when modal is active, user should not be able to tab to elements underneath the modal and modal overlay. Tabbing should stay within the modal.
Actual behavior You can tab to elements outside the modal when modal is active ( links, inputs, buttons, etc). Your example react modal page doesn't have this bug since it's not in react.
The default bootstrap 4 modal prevents you from tabbing to elements of the page.
The angular and react-strap bootstrap 4 frameworks also prevent tabbing to elements underneath the modal with their focus trap.
I've also made sure that the modal is not nested inside the main container but rather on the same html hierarchy level so it's not a z-index issue.
This has been around since the early versions of MDB React.
Can we possibly get this addressed in the future please?
Hi,
thanks for your topic. I understand your problem and I made a task on our list to do with this problem. Sorry about that. We will try to fix this as soon as possible. I think maybe in the next release or another one.
Best,
Piotr
johndoe pro commented 5 years ago
Okay thank you.
Was not looking forward to my last resort of setting the tabIndex of elements underneath to -1 when a modal is active.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: No
- Technology: MDB React
- MDB Version: 4.20.0
- Device: Desktop
- Browser: Chrome
- OS: Windows 10
- Provided sample code: No
- Provided link: No