Working with components portalled to child DOM windows

[stil]

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:

react-focus-on/src/Effect.tsx

Lines 81 to 90 in 7a4752a

	document.addEventListener('keydown', onKeyDown);
	document.addEventListener('mousedown', onMouseDown);
	document.addEventListener('touchstart', onTouchStart);
	document.addEventListener('touchend', onTouchEnd);
	return () => {
	document.removeEventListener('keydown', onKeyDown);
	document.removeEventListener('mousedown', onMouseDown);
	document.removeEventListener('touchstart', onTouchStart);
	document.removeEventListener('touchend', onTouchEnd);

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?

[theKashey]

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?

[stil]

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?

[theKashey]

Let's see how it works...