Method to not lock mouseEvent focusing

[tounsoo]

We have a use case where we want to focusLock on tabs but not on mouse click.

Here is an example where we try to make that happen but the problem we are facing is that it will require 2 clicks to focus on the outside input. Any idea on how to make this happen without requiring 2 clicks?

https://codesandbox.io/s/hardcore-gagarin-mjh4v?file=/index.js

[theKashey]

Not something supported out of the box.

• Technically speaking changing onClick to onClickCapture with the non-published change for [Focus lock breakage after updating React to V17]: Unable to get focus inside dialog content( react portal) which is being created from focus-lock content #134 can resolve the problem. Have to try it first, as the "order of events" can keep focus active by the time of "click" (useEffects runs late)

• Another option is to use some "onClickOutside", attached to window, as it will cause a synchronous update - useEffect can be synchronous? facebook/react#22506 and lock will be disabled "instantly"

• One more option is to use "whitelist" to allow focusing on anything, except "guards" - elements matching [data-focus-guard] selector, inserted before and after lock.

• The last option is not using lock at all, manually managing focus from the last element to the first (underlaying focus-lock library has everything for it)

[tounsoo]

@theKashey Thank you! I used the second option and created onClickOutside useEffect to handle it :D

[theKashey]

🙄 Is it working for you? My advice was not supported by any real experiment.

[tounsoo]

You can checkout the codesandbox, I updated it and made it into a FC so I can reuse it

[theKashey]

Amazing! Thank you @alexreardon for running into this issue, and helping @tounsoo to resolve theirs.