From 6e1b115c95d0680dedbc80b882c03fc0b51513e4 Mon Sep 17 00:00:00 2001
From: Mike Fix <mrfix84@gmail.com>
Date: Tue, 16 Jun 2020 19:45:02 -0700
Subject: [PATCH] move mouse up listener to the window

Closes #1034
---
 components/WidthHandler.js | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/components/WidthHandler.js b/components/WidthHandler.js
index 29f9c6f..eb9a7d9 100644
--- a/components/WidthHandler.js
+++ b/components/WidthHandler.js
@@ -34,6 +34,14 @@ export default function WidthHandler(props) {
     return () => window.removeEventListener('mousemove', handleMouseMove)
   }, [innerRef, onChange])
 
+  React.useEffect(() => {
+    function handleMouseUp() {
+      startX.current = null
+    }
+    window.addEventListener('mouseup', handleMouseUp)
+    return () => window.removeEventListener('mouseup', handleMouseUp)
+  }, [])
+
   return (
     // eslint-disable-next-line
     <div
@@ -42,9 +50,6 @@ export default function WidthHandler(props) {
         startX.current = e.pageX
         startWidth.current = innerRef.current.clientWidth
       }}
-      onMouseUp={() => {
-        startX.current = null
-      }}
       role="separator"
       aria-orientation="vertical"
       aria-valuemin={minWidth}