I'm not able to interact with anything out of the trap

[martinmunillas]

I would like to know or if this is an expected behavior, but i'm not being able to interact with nothing outside the trap, i just want to trap the focus, i don't want to trap the whole interactivity there, any way to do this with this library?

[stefcameron]

That is definitely the expected behavior, hence the name "focus trap"! 😄

That said, there may be a focus-trap option that can help you out here. You could try setting the allowOutsideClick option to true (it's false by default), which would allow elements outside the trap to receive mouse clicks. You still won't be able to tab to any element outside the trap, so this won't help disabled users who can't use a mouse, but if that's not a concern, then this might do what you're wanting. Besides, if you allow the tab key to move focus outside the trap, then you don't have a "focus trap" anymore...

<FocusTrap
  focusTrapOptions={{ allowOutsideClick: true }}
>
  {children}
</FocusTrap>

Notice you can give a function to the option so that you can further control click behavior when it's outside the trap.

[martinmunillas]

Thanks a lot!! yes, i just wanted users with no disabilities to be able to click anywhere, thanks!!

[stefcameron]

My pleasure!