When clicking to drag a map that has been opened in a popout window, the dragging events will only resolve if the mouse pointer is over/in the parent window

[mhwaage]

Checklist

• I've looked at the documentation to make sure the behavior isn't documented and expected.
• I'm sure this is an issue with Leaflet, not with my app or other dependencies (Angular, Cordova, React, etc.).
• I've searched through the current issues to make sure this hasn't been reported yet.
• I agree to follow the Code of Conduct that this project adheres to.

Steps to reproduce

1. Create a page that, instead of embedding the map directly into the page, allows the user to open a window with a map in it.
2. Try to move the map around by clicking + dragging.

Expected behavior

When clicking and dragging in the child window, the map moves. When releasing the mouse in the child window, the drag behaviouor is ended.

Current behavior

When clicking and dragging in the child window nothing changes. After initiating drag, when movin the mouse in/over the parent window, the map in the child window starts moving. The drag event is only ended after refocusing the parent window.

Minimal example reproducing the issue

https://plnkr.co/edit/ZtQYoVNQI6V6CBQl

Environment

• Leaflet version: 1.9.4
• Browser (with version): Edge 120.0.2210.133
• OS/Platform (with version): Windows 10 Enterprise 19045.3693

[mhwaage]

The behaviour is due to how the mouse events are registered in src/dom/Draggable.js : If I replace all instances of document in that file with this._element.ownerDocument then my problem would go away, but I don't know if that interferes with any other desired behaviour.

[mhwaage]

It is possible that https://github.com/mnisvdn/Leaflet.DraggableEnhancer would resolve this, but it appears to not target more recent versions of Leaflet (it expects Draggable to expose START/END/MOVE objects which have been removed for some time).

Inspired by that plugin, adding a plugin as follows works fine for my purposes:

import * as L from "leaflet";

L.Draggable.include(
    {
        _onDownLegacy: L.Draggable.prototype._onDown,
        finishDragLegacy: L.Draggable.prototype.finishDrag,
        _onDown(e) {
            this._onDownLegacy.call(this, e);
            const mouseevent = e.type === 'mousedown';
            L.DomEvent.on(this._element.ownerDocument, mouseevent ? 'mousemove' : 'touchmove', this._onMove, this);
            L.DomEvent.on(this._element.ownerDocument, mouseevent ? 'mouseup' : 'touchend touchcancel', this._onUp, this);
        },
        finishDrag(noInertia) {
            this.finishDragLegacy.call(this, noInertia);
            L.DomEvent.off(this._element.ownerDocument, 'mousemove touchmove', this._onMove, this);
            L.DomEvent.off(this._element.ownerDocument, 'mouseup touchend touchcancel', this._onUp, this);
        }
    }
)