From 267b55335ae742084a92d08514e5c49654ff3bb5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lo=C3=ABck=20V=C3=A9zien?= <nainpuissant@gmail.com>
Date: Mon, 16 Apr 2018 17:36:10 +0200
Subject: [PATCH] Fix mouseup on StepperNumber

---
 src/components/base/StepperNumber/index.js | 29 ++++++++++++++--------
 1 file changed, 18 insertions(+), 11 deletions(-)

diff --git a/src/components/base/StepperNumber/index.js b/src/components/base/StepperNumber/index.js
index 2727445c..0bc87bea 100644
--- a/src/components/base/StepperNumber/index.js
+++ b/src/components/base/StepperNumber/index.js
@@ -117,7 +117,22 @@ class StepperNumber extends PureComponent<Props, State> {
     }
   }
 
-  handleMouseUp = () => clearTimeout(this._timeout)
+  handleMouseDown = (type: 'increment' | 'decrement') => () => {
+    document.addEventListener('mouseup', this.handleMouseUp)
+
+    if (type === 'increment') {
+      this.increment()
+    }
+
+    if (type === 'decrement') {
+      this.decrement()
+    }
+  }
+
+  handleMouseUp = () => {
+    clearTimeout(this._timeout)
+    document.removeEventListener('mouseup', this.handleMouseUp)
+  }
 
   render() {
     const { value } = this.state
@@ -127,19 +142,11 @@ class StepperNumber extends PureComponent<Props, State> {
 
     return (
       <Container>
-        <Btn
-          onMouseDown={!isMin ? this.decrement : undefined}
-          onMouseUp={this.handleMouseUp}
-          disabled={isMin}
-        >
+        <Btn onMouseDown={!isMin ? this.handleMouseDown('decrement') : undefined} disabled={isMin}>
           -
         </Btn>
         <Num>{value}</Num>
-        <Btn
-          onMouseDown={!isMax ? this.increment : undefined}
-          onMouseUp={this.handleMouseUp}
-          disabled={isMax}
-        >
+        <Btn onMouseDown={!isMax ? this.handleMouseDown('increment') : undefined} disabled={isMax}>
           +
         </Btn>
       </Container>