Lock focus on modal

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!

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.

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