adding check for mousemove (#13090)

* adding check for mousemove

* adding unit test for SyntheticMouseEvent

* changing test to start with 2, removing comments

packages/react-dom/src/events/SyntheticMouseEvent.js

@@ -53,7 +53,7 @@ const SyntheticMouseEvent = SyntheticUIEvent.extend({
       return 0;
     }
 
-    return event.screenX - screenX;
+    return event.type === 'mousemove' ? event.screenX - screenX : 0;
   },
   movementY: function(event) {
     if ('movementY' in event) {
@@ -68,7 +68,7 @@ const SyntheticMouseEvent = SyntheticUIEvent.extend({
       return 0;
     }
 
-    return event.screenY - screenY;
+    return event.type === 'mousemove' ? event.screenY - screenY : 0;
   },
 });
 

packages/react-dom/src/events/__tests__/SyntheticMouseEvent-test.js

@@ -0,0 +1,80 @@
+/**
+ * Copyright (c) 2013-present, Facebook, Inc.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @emails react-core
+ */
+
+'use strict';
+
+let React;
+let ReactDOM;
+
+describe('SyntheticMouseEvent', () => {
+  let container;
+
+  beforeEach(() => {
+    React = require('react');
+    ReactDOM = require('react-dom');
+
+    // The container has to be attached for events to fire.
+    container = document.createElement('div');
+    document.body.appendChild(container);
+  });
+
+  afterEach(() => {
+    document.body.removeChild(container);
+    container = null;
+  });
+
+  it('should only use values from movementX/Y when event type is mousemove', () => {
+    const events = [];
+    const onMouseMove = event => {
+      events.push(event.movementX);
+    };
+
+    const onMouseDown = event => {
+      events.push(event.movementX);
+    };
+
+    const node = ReactDOM.render(
+      <div onMouseMove={onMouseMove} onMouseDown={onMouseDown} />,
+      container,
+    );
+
+    let event = new MouseEvent('mousemove', {
+      relatedTarget: null,
+      bubbles: true,
+      screenX: 2,
+      screenY: 2,
+    });
+
+    node.dispatchEvent(event);
+
+    event = new MouseEvent('mousemove', {
+      relatedTarget: null,
+      bubbles: true,
+      screenX: 8,
+      screenY: 8,
+    });
+
+    node.dispatchEvent(event);
+
+    // Now trigger a mousedown event to see if movementX has changed back to 0
+    event = new MouseEvent('mousedown', {
+      relatedTarget: null,
+      bubbles: true,
+      screenX: 25,
+      screenY: 65,
+    });
+
+    node.dispatchEvent(event);
+
+    expect(events.length).toBe(3);
+    expect(events[0]).toBe(0);
+    expect(events[1]).toBe(6);
+    expect(events[2]).toBe(0); // mousedown event should have movementX at 0
+  });
+});