Having an issue with trapping focus working on just the first and last element

FIrst off, thanks for such an awesome maintenance of this project! Been reading through all the other issues and your responses have been super insightful and through!

I’ve created a complex component for a context menu and trying to trap focus within this context menu for easy navigation and accessibility reasons. The problem I am having is that focus-trap-react is only locking in the first and last element of my menu and won’t let me tab into anything in the middle. I tried to strip out all the complexities (styled components, array.map()) and still having this issue.

Here is the most simple component I created. I can tab into “label 1” and then shift+tab into “label 4”

      <FocusTrap active={true} focusTrapOptions={{ fallbackFocus: "#menu" }}>
        <div id="menu">
          <button>label 1</button>
          <button>label 2</button>
          <button>label 3</button>
          <button>label 4</button>
        </div>
      </FocusTrap>

https://user-images.githubusercontent.com/10911227/185664313-a41b0ba1-6b1b-46a1-8414-500d9d734216.mov

Not sure if you have seen this or any have tips?

[pushkatel]

Figured out the problem and hopefully this can be a helpful note to others. I had an unneeded event.preventDefault() on all keypresses (not just the Escape key that I needed to close the menu)!

Watch out for any keyboard events!

[stefcameron]

Great! Thanks for posting your solution. I’m going to close this issue now.