Modal prevent tabbing / focus trap


Topic: Modal prevent tabbing / focus trap

johndoe pro asked 5 years ago

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?


Piotr Glejzer staff answered 5 years ago

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.


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • 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
Tags