Chart.js
Chart.js copied to clipboard
chartjs
React portal in full screen. mouse move detection not working
Expected behavior
when creating a new window with react portal containing a chart, the full screening of the new window should resize the chart to the screen and also have tooltips functionality working.
Current behavior
When creating a new window with react portal, a full screening of that new window does not include the mouse move detection anymore. As a result, the tooltip does not work. Otherwise, the manually resizing of the window does include mouse move detection. Oddly when moving the new window to another monitor in full screen, mouse move detection returns.
Reproducible sample
https://codesandbox.io/s/react-new-window-forked-is9f5k
Optional extra steps/info to reproduce
No response
Possible solution
No response
Context
No response
chart.js version
3.9.1
Browser name and version
Chrome: Version 103.0.5060.134
Link to your project
No response
No idea what is going on there. Chart.js does not require mousemove to detect resize. It uses ResizeObserver.
I'm having similar issues putting a chart in a Portal in a new window and the resizing not working. Interestingly, it seems as though the chart is listening for resize events on the original document, as although resizing the new window with the chart doesn't cause the chart to resize, if you resize the original window then the chart suddenly updates and fills the popup window correctly.
yeah, as weird as it seems it feels like all the events are still being handled by the main window. Once the main window is covered by the portal through the maximize button, all listeners in the chart are stalled till the main window is visible again. I've added the plugin from chartjs-zoom-plugin and the functionality for zoom and pan still work in all cases.
following up. this still seems to be the case. If you open the portal then go to a different tab on the main window, interactions no longer work in any cases.
From my experience on this, I've seen things start to go haywire when the new window obscures the main browser window. For example, when the main browser window is resized to a smaller size, the issue starts occurring when the new window obscures the main browser window entirely.
So this may not be related to making the window full screen in particular, the issue just occurs in that case because in full screen the window is always obscuring the main browser window.
From my experience on this, I've seen things start to go haywire when the new window obscures the main browser window. For example, when the main browser window is resized to a smaller size, the issue starts occurring when the new window obscures the main browser window entirely.
So this may not be related to making the window full screen in particular, the issue just occurs in that case because in full screen the window is always obscuring the main browser window.
This indeed seems to be the case, if you use 2 screens, open the reproducable sample, maximize the popup window it indeed does not work, if you drag it to your second screen and maximize it again or any other size it works fine
