From 5b3d17a5f729eb204371ad1953a07ec3ae3dae00 Mon Sep 17 00:00:00 2001
From: Jason Williams <936006+jasonwilliams@users.noreply.github.com>
Date: Wed, 20 Jun 2018 22:48:53 +0100
Subject: [PATCH] setting a flag, so that the first movement will have the
 correct value (#13082)

---
 .../src/events/SyntheticMouseEvent.js         | 23 +++++++++++++++----
 1 file changed, 19 insertions(+), 4 deletions(-)

diff --git a/packages/react-dom/src/events/SyntheticMouseEvent.js b/packages/react-dom/src/events/SyntheticMouseEvent.js
index d3319ec48715..02a7926e68b1 100644
--- a/packages/react-dom/src/events/SyntheticMouseEvent.js
+++ b/packages/react-dom/src/events/SyntheticMouseEvent.js
@@ -8,8 +8,11 @@
 import SyntheticUIEvent from './SyntheticUIEvent';
 import getEventModifierState from './getEventModifierState';
 
-let previousScreenX = null;
-let previousScreenY = null;
+let previousScreenX = 0;
+let previousScreenY = 0;
+// Use flags to signal movementX/Y has already been set
+let isMovementXSet = false;
+let isMovementYSet = false;
 
 /**
  * @interface MouseEvent
@@ -44,7 +47,13 @@ const SyntheticMouseEvent = SyntheticUIEvent.extend({
 
     const screenX = previousScreenX;
     previousScreenX = event.screenX;
-    return screenX ? event.screenX - screenX : 0;
+
+    if (!isMovementXSet) {
+      isMovementXSet = true;
+      return 0;
+    }
+
+    return event.screenX - screenX;
   },
   movementY: function(event) {
     if ('movementY' in event) {
@@ -53,7 +62,13 @@ const SyntheticMouseEvent = SyntheticUIEvent.extend({
 
     const screenY = previousScreenY;
     previousScreenY = event.screenY;
-    return screenY ? event.screenY - screenY : 0;
+
+    if (!isMovementYSet) {
+      isMovementYSet = true;
+      return 0;
+    }
+
+    return event.screenY - screenY;
   },
 });