Put stopDrag on document

ui/src/shared/components/Threesizer.tsx

@@ -65,6 +65,16 @@ class Threesizer extends Component<Props, State> {
     }
   }
 
+  public componentDidMount() {
+    document.addEventListener('mouseup', this.handleStopDrag)
+    document.addEventListener('mouseleave', this.handleStopDrag)
+  }
+
+  public componentWillUnmount() {
+    document.removeEventListener('mouseup', this.handleStopDrag)
+    document.removeEventListener('mouseleave', this.handleStopDrag)
+  }
+
   public componentDidUpdate(__, prevState) {
     const {dragEvent} = this.state
     const {orientation} = this.props
@@ -112,7 +122,6 @@ class Threesizer extends Component<Props, State> {
     return (
       <div
         className={this.className}
-        onMouseLeave={this.handleMouseLeave}
         onMouseUp={this.handleStopDrag}
         onMouseMove={this.handleDrag}
         ref={r => (this.containerRef = r)}
@@ -207,10 +216,6 @@ class Threesizer extends Component<Props, State> {
     this.setState({activeHandleID: '', dragEvent: initialDragEvent})
   }
 
-  private handleMouseLeave = () => {
-    this.setState({activeHandleID: '', dragEvent: initialDragEvent})
-  }
-
   private mousePosWithinContainer = (e: MouseEvent<HTMLElement>) => {
     const {pageY, pageX} = e
     const {top, left, width, height} = this.containerRef.getBoundingClientRect()