Drag/drop stops working when the calendar is rendered into another document (portal to a separate window or iframe)
Check that this is really a bug
- I confirm
Reproduction link
https://codesandbox.io/p/sandbox/d5hvhs
Bug description
Selection attaches its mouse/drag listeners and runs document.elementFromPoint
hit-testing and pageOffset scroll math against the module-global document/window.
When a calendar is rendered into a different document (e.g. a React portal into a
window.open window, or an iframe), those listeners are bound to the host page's
document and never receive the events fired in the calendar's own window. Result:
event move/resize and drag-from-outside silently do nothing. Ordinary clicks and other
React-handled interactions still work (React delegates synthetic events to the portal
correctly), only RBC's own native listeners are mis-targeted.
To Reproduce
- Render
withDragAndDrop(Calendar)into a portal whose container lives in a separatewindow.opendocument. - Try to move/resize an event, or drag an external item onto the calendar.
- Nothing happens (the same calendar works in-page).
Expected Behavior
Drag/resize/drop work regardless of which document the calendar is rendered into.
Actual Behavior
Drag/resize/drop do not work in the other document.
react-big-calendar version
1.20.0
React version
19.2.4
Platform/Target and Browser Versions
macOS Chrome 149.0.7827.199
Validations
- Read the docs.
- Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
- Make sure this is a react-big-calendar issue and not an implementation issue
Would you like to open a PR for this bug?
- I'm willing to open a PR
Source: bigcalendar/react-big-calendar