Topic: Lock focus on modal

WingedImagination priority asked 11 months 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


Wojciech Staniszewski staff answered 10 months ago


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


WingedImagination priority answered 11 months 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 11 months 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

  • User: 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