onResize does not get called when observed component is rendered in an external window

[LeoLeoni]

When the component I am trying to observe is rendered in a separate window, it seems like it's size is not observed until hovering over the main window with the mouse.

I've made a minimally reproducible example here: https://github.com/LeoLeoni/floating-resize-observer

Steps to reproduce:

1. Clone the repo, npm install, and npm run dev
2. Open it in a browser and click the Randomize Size button. The red element gets set to a random width and height between 40px and 400px and the useResizeObserver hook runs and gets the dimensions.
3. Now click the Open Window button. Arrange the second window on your desktop so that is does not overlap with the parent window.
4. Click the Randomize Size button on the second window. The element changes size, but the onResize function is never called and the resize is never seen.
5. Hover the cursor over the parent window. Only now is the size observed.

[ZeeCoder]

Does the same issue happen when only using the ResizeObserver global? I have a suspicion that this is not specific to the hook, but the way RO works.

[LeoLeoni]

The same issue happens when using the ResizeObserver global which defaults to window.ResizeObserver which is the observer on the main window, not the child window. I've dealt issues with functions of window in the past and the solution is to get the window in which the ref element is rendered in rather than the window global. If there were any way to integrate something like this it would likely solve the issue:

const refToObserve = useRef<Element>(); // Passed to use-resize-observer

const currentDocument: Document = ref.current.ownerDocument;
const currentWIndow: Window = currentDocument.defaultView;

const ro = currentWindow.ResizeObserver(...)