Popout Window - react-map-gl interaction breaking

[ConnorTJolley]

Describe the bug Apologies for the specific case bug, but if you have a https://visgl.github.io/react-map-gl/docs react-map-gl component within a panel and then have that popout, all interaction seems to break.

To Reproduce

Steps to reproduce the behavior:

• Have a basic layout of 2/3 panels (ensuring one is a full width/height react-map-gl map component)
• Interact with the map via dragging and panning the view
• Observe it is working correctly
• Popout the panel that contains the map
• Interact with the map via dragging and panning the view
• Observe it is not working
• Click and hold in the map component and drag your mouse over one of the existing panels in the layout
• Observe the map interaction now briefly does something

Expected behavior I would expect that the popout of the map panel would ensure that the div the components create for its interaction are retained within the panel and the interaction isn't broken.

Screenshots Above SC shows that the div the mapbox creates in the root of the DOM it belongs to is still present in the original location of the panel

Above SC shows that the canvas that belongs to the map is present in the popout window

Desktop (please complete the following information):

• Chrome
• Version 131.0.6778.140

Additional context Apologies again for not being able to give a codesandbox or fork that can show this issue better, I do have the following video which demonstrates the issue:

https://github.com/user-attachments/assets/40780ec5-3d66-41b0-a4cc-f99291aba90b

[david-tsai-skydio]

@mathuo - I am unfortunately seeing the same issue (e.g. broken drag interactions) when testing with either react-map-gl or mapbox-gl (w/ custom wrapper)

I've put together a repro using Codesandbox directly based off your latest "demo" app from your docs website. You'll need to provide a Mapbox access token in mapboxPanel.tsx.

Here is a recording showing the behavior

Wondering if you have advice on how we could address this or if I'm missing something. Drag interactions within a floating panel works as expected, but when said Mapbox panel is a "popout", it no longer works.

cc: @crubier

[thezboe]

I'm having a separate issue caused by the same thing. References to elements are sticking in the main window instead of the popout.

[david-tsai-skydio]

@thezboe - are you working with a map in your popout as well?

[thezboe]

I'm not working with map, but other things that use canvas. There are a bunch of things that don't work with the popout system, probably stemming from any JS running references the document/window of the main window and not the popout.

Things like tooltips in frameworks don't work because they rely on teleport which uses the document potentially. Things that attach their listeners to the document also don't work, which is why, I assume, panning on the map doesn't work. The functionality that is broken in my app is similar to that.