Unable to reference popout window from parent

[naheller]

In order to detect mouse events on a popout window from its parent, we need to be able to reference it.

In the code, the reference is set to this.window, however this does not appear to be exposed to the internal react component:

this.window = window.open(url, name, toWindowFeatures(features))

I can think of no other way to reference the popout window from its parent, and this is essential for many use cases. You suggestions are appreciated!

[rmariuzzo]

Maybe, if we create an onOpen prop that gets called with the new window reference.

What do you think?

On Wed, Apr 10, 2019, 2:19 PM Nathan Heller [email protected] wrote:

In order to detect mouse events on a popout window from its parent, we need to be able to reference it.

In the code https://github.com/rmariuzzo/react-new-window/blob/4a68efd4c7af64096c5a6bfcfe1697ee294c590c/src/NewWindow.js#L99, the reference is set to this.window, however this does not appear to be exposed to the internal react component:

this.window = window.open(url, name, toWindowFeatures(features))

I can think of no other way to reference the popout window from its parent, and this is essential for many use cases. You suggestions are appreciated!

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/rmariuzzo/react-new-window/issues/34, or mute the thread https://github.com/notifications/unsubscribe-auth/AAa2H05QvxE8Q6o_QmfVgSZL1tcVJXTlks5vfis_gaJpZM4cn9d6 .

[naheller]

@rmariuzzo In this implementation, would the user provide a function to the onOpen prop in the same way we do with onBlock? Except instead of passing null, we would pass the window reference?

[naheller]

@rmariuzzo I attempted to copy the approach used by onBlock in openChild() in NewWindow.js:

if (typeof onOpen === 'function') {
    onOpen.call(this.window)
}

And the consuming component:

<Component onOpen={window => console.log(window)} />

However this is not working for me. I have an open PR that works as desired, however it does not involve passing any props. The this.window reference is simply passed down on render.

One issue I have with passing down the window reference in ComponentDidMount is that it will only be passed once. What if the window size changes? We'll need an updated window reference. Maybe that's a ComponentDidUpdate use case...

Your thoughts?

[kusmierz]

@naheller, it should be onOpen.call(null, this.window) imho :)

[Jip-Hop]

I see the onOpen callback has been added since 30 May 2019. Is that enough to fix the window reference? I also have the problem that window.addEventListener('mousemove') is not working on the popout window.

[zur4ik]

I ran into a similar problem with reference when tried to print popup content with a button click. Instead of popup content, parent window content was printed. Then I used React reference and it worked:

<NewWindow ref={ref}>
   ...
  <button onClick={e=>{ ref.current.window.print() }}>Print</button>
</NewWindow>

[rmariuzzo]

Interesting

On Tue, Jun 30, 2020, 13:34 Zura Jijavadze [email protected] wrote:

I had the same issue with reference when tried to print popup content with a button click. Instead of popup content, parent window content was printed. Then I used React reference and it worked:

... { ref.current.window.print() }}

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/rmariuzzo/react-new-window/issues/34#issuecomment-651939230, or unsubscribe https://github.com/notifications/unsubscribe-auth/AADLMH5N3BSCDOPBEVG46ELRZIOZLANCNFSM4HE7255A .

[rmariuzzo]

Is it possible to reference the new window instance using the onOpen callback. I apologize for the long reply.