search

theKashey / react-focus-lock

It is a trap! A lock for a Focus. 🔓
MIT License
1.27k stars 67 forks source link

Option to allow clicks outside the focus trap #317

Closed lazyd3v closed 1 month ago

lazyd3v commented 1 month ago

I'm wondering if it's possible to deactivate the focus trap and allow the click event to pass through.

In other words, if I use the keyboard for navigation, I'll be "trapped". But if I click on some element outside the trap, the trap should be immediately deactivated and allow the click event to do its thing.

At the moment, it's not the case, and here's the example. If you activate the trap, the input at the bottom of the page will not be clickable.

theKashey commented 1 month ago

It is accessible. Here - I've added onClick to disable trap and it is working. https://codesandbox.io/p/sandbox/react-focus-lock-forked-9fw7rm?file=%2Findex.js%3A56%2C39

Elements outside the trap are clickable and focusable. Focus-Lock triggers right after and returning focus, so you cannot "sense" it.

If you want a little bit automated solution, then https://github.com/theKashey/react-focus-on exposes "clickoutside" as a part of it's API