Leaflet.js - Displaying a moving rectangle during drag - leaflet

Question

I have an interface where, while the map is dragged, a rectangle is drawn on the map.
I've created a stripped down version of this functionality via this plunkr. The JS used for the plunkr is this:
var map = new L.Map('leaflet', {
layers: [
new L.TileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
'attribution': 'Map data © OpenStreetMap contributors'
})
],
center: [36, -98],
zoom: 6,
renderer: L.svg({ padding: 100 })
});
var rectangle = L.rectangle(map.getBounds().pad(-0.1));
map.on("dragstart", function (e) {
var b = map.getBounds().pad(-0.1);
rectangle.setBounds(b);
rectangle.addTo(map);
map.on("drag", dragEvent);
});
map.on("dragend", function (e) {
rectangle.removeFrom(map);
map.off("drag", dragEvent);
});
map.on("mouseup", function(e){
console.log("mouseup!");
});
var dragEvent = function(e) {
rectangle.setBounds(map.getBounds().pad(-0.1));
}
This appears to work okay in Chrome and Internet Explorer. The problem I'm encountering is with Firefox (v59.0.2 64bit on Windows). In FF, if you click and drag the map, and release the mouse button while hovering over the rectangle, there seems to be a missing mouseup event. This means that if you hover over the toolbar on the right of the plunkr, you won't see the expected hover behavior until you click somewhere on the toolbar.
My questions, then:
Is there a better way to implement this functionality?
If not, anyone have an idea why this is occurring with FF?

Answer 1

In FF, if you click and drag the map, and release the mouse button while hovering over the rectangle, there seems to be a missing mouseup event.
Although it doesn't look good, but wrapping the removal of the rectangle in setTimeout would fix the issue:
map.on("dragend", function (e) {
setTimeout(function() {
rectangle.removeFrom(map);
}, 1);
map.off("drag");
});
Another solution would be creating an own mouseup handler for the rectangle:
map.on("dragend", function (e) {
map.off("drag");
});
map.on("mouseup", function(e) {
rectangle.removeFrom(map);
});
rectangle.on("mouseup", function (e) {
rectangle.removeFrom(map);
L.DomEvent.stopPropagation(e);
});
Also, there might be a reason to open an issue on https://github.com/Leaflet/Leaflet/issues