react-focus-on

react-focus-on copied to clipboard

Hi, my app is attempting to render components through portals to child windows (opened via window.open).

Directly I use @elastic/eui which uses react-focus-on (and other libraries that you maintain).

I have problems with onClickOutside not firing in my child windows. Are you aware of any compatibility issues that would prevent react-focus-on from working with child windows?

I'm suspecting any hardcoded references to window/document global object such as: https://github.com/theKashey/react-focus-on/blob/7a4752a84257e37c16f300722805f7c0bcd6a26d/src/Effect.tsx#L81-L90

I'm attempting to modify dependent libraries in such way that they inherit current window from Window Provider, similar to https://github.com/microsoft/fluentui/tree/master/packages/react-window-provider

Would it be possible to modify the library in such way so it accepts different window object than the global one?

FocusLock already uses ownerDocument to refer to the right one, we can try the same approach here.

• for every shard
• get an owning document
• and add event listeners to it

-document.addEventListener('keydown', onKeyDown); 
+activeNode.ownerDocument.addEventListener('keydown', onKeyDown); 

Can you try directly modifying your version of focus-on and share results?

Hi, thank you for looking into this issue.

I tried replacing all occurrences of document with activeNode.ownerDocument and it worked! Could you please prepare a release with fix?

Let's see how it works...

This issue has been marked as "stale" because there has been no activity for 2 months. If you have any new information or would like to continue the discussion, please feel free to do so. If this issue got buried among other tasks, maybe this message will reignite the conversation. Otherwise, this issue will be closed in 7 days. Thank you for your contributions so far.

This is still valid, please merge the fix from one of the PRs, thank you.