From 8b91e6db79032d5c0436f1ea497380e0615954ee Mon Sep 17 00:00:00 2001
From: jberg <jberg@users.noreply.github.com>
Date: Mon, 12 Aug 2019 15:02:48 -0700
Subject: [PATCH] Always fire mouseup on element that had mousedown (#850)

---
 modern/src/App.js | 32 ++++++++++++++++++++++++--------
 1 file changed, 24 insertions(+), 8 deletions(-)

diff --git a/modern/src/App.js b/modern/src/App.js
index 2033a563..faee3f96 100644
--- a/modern/src/App.js
+++ b/modern/src/App.js
@@ -27,6 +27,30 @@ function handleMouseEventDispatch(node, event, eventName) {
   const x = event.clientX - rect.left;
   const y = event.clientY - rect.top;
   node.js_trigger(eventName, x, y);
+
+  if (event.nativeEvent.type === "mousedown") {
+    // We need to persist the react event so we can access the target
+    event.persist();
+    document.addEventListener("mouseup", function globalMouseUp(ev) {
+      document.removeEventListener("mouseup", globalMouseUp);
+      // Create an object that looks and acts like an event, but has mixed
+      // properties from original mousedown event and new mouseup event
+      const fakeEvent = {
+        target: event.target,
+        clientX: ev.clientX,
+        clientY: ev.clientY,
+        nativeEvent: {
+          type: "mouseup",
+        },
+        stopPropagation: ev.stopPropagation.bind(ev),
+      };
+      handleMouseEventDispatch(
+        node,
+        fakeEvent,
+        eventName === "onLeftButtonDown" ? "onLeftButtonUp" : "onRightButtonUp"
+      );
+    });
+  }
 }
 
 function handleMouseButtonEventDispatch(
@@ -53,14 +77,6 @@ function GuiObjectEvents({ node, children }) {
           "onRightButtonDown"
         )
       }
-      onMouseUp={e =>
-        handleMouseButtonEventDispatch(
-          node,
-          e,
-          "onLeftButtonUp",
-          "onRightButtonUp"
-        )
-      }
       onDoubleClick={e =>
         handleMouseButtonEventDispatch(
           node,