React-bootstrap: tabindex="-1": problem with live chats and modals

[lailo]

Hi there

I'm currently using Crisp.im to communicate with my users, but when I have a modal open, the chat text area does not work.

As soon as I remove the tabindex="-1" from the modal, it works perfectly. I tried other live chats and talked to a lot of support guys and they all told me that tabindex is a problem.

Problem

<div class="fade in modal" role="dialog" tabindex="-1" style="display: block;">
  // ..
</div>

An idea how to fix this?

Cheers
Lailo

[jquense]

why is tabIndex a problem? when a modal is open the modal and modal content is the only thing that can be focused, which is what a "modal" means.

[lailo]

@jquense What if a user has problems inside the modal and needs live support?

[taion]

Then render the support popup inside the modal node. Or else disable enforceFocus on the modal.