Steps to reproduce:
- Go to this perfherder graph.
- Start dragging a rectangle in the middle of the graph.
- Drag your mouse all the way to the right, leaving the graph area.
- Release the mouse button.
When the mouse button is released, the new selection should be committed.
Also, while the mouse is moving outside of the graph, the rectangle should still update.
The mousemove and mouseup outside the graph area are ignored, and the selection is stuck in the selecting mode.
For these types of UIs, the mousemove and mouseup handlers should be set on the window. This will ensure that all events are received even when the mouse leaves the browser window. See this
Draggable component in the Firefox profiler for inspiration.