Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: Lock focus on modal

WingedImagination priority asked 3 years ago


How can I lock focus on a modal when its active?

Currently, by pressing the tab key, I can jump between page elements (and even change their value) that are outside the modal (when the modal is active).

edit: 'staticBackdrop' and 'backdrop' do not solve this problem



We will improve the performance of the MDBModal within the next week. The changes will be available in the next release.


WingedImagination priority answered 3 years ago


Your example makes it impossible to use the tab button at all - and also make it impossible to enter any data in the modal. There is also no autofocus on the modal (currently it is on the element that triggered the modal), so you can tab over the fields from outside the modal anyway - until you jump to the modal in which you can do nothing.

If I limit the lock to the 'tab' button, it is possible to enter data, but it is not possible to switch between fields within the modal.

Correctly, the modal should have autofocus and user should be able to move via the tab key only between modal fields - now it is not possible.


Krzysztof Wilk staff answered 3 years ago


Hi!

Thanks for reporting that. We have to implement a focus trap in our component. For now, you can try using this simple function that will prevent jumping between page elements using a tab key :)

  const preventClickingOutside = (e) => {
    if (!basicModal) return;
    e.preventDefault();
  }

Then use it in the MDBModal component:

<MDBModal onKeyDown={preventClickingOutside} show={basicModal} setShow={setBasicModal} tabIndex='-1'>

Keep coding!



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

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB React
  • MDB Version: MDB5 2.2.0
  • Device: Macbook pro
  • Browser: google chrome
  • OS: macOS
  • Provided sample code: No
  • Provided link: No