Search code examples
javascriptreactjsnext.jsfocus

How to avoid initial focus on Focus-Trap

I'm using Focus-trap (https://www.npmjs.com/package/focus-trap) to improve the accessibility of my modal when using keyboard.

My code:

<FocusTrap focusTrapOptions={{onDeactivate: onClose}} >
  <div>
  ...
  </div>
<FocusTrap>

But when I use the mouse to open my modal, the first button already appears with focus (the ring that only appears when I use the keyboard).

enter image description here

To try to solve this I added initialFocus: 'false':

<FocusTrap focusTrapOptions={{ initialFocus: 'false', onDeactivate: onClose}} >
  <div>
  ...
  </div>
<FocusTrap>

But I end up getting this error as soon as the modal opens. enter image description here

How can I fix this? Is there any other way to solve it?

Avoid focus when I open the modal by mouse, only focus on the element when using the keyboard.

Solution

  • I just change from 'false' to false, an it's works