Adapt pickers to calculate position with scroll

Author: javivelasco

components/time_picker/Clock.jsx

@@ -54,7 +54,7 @@ class Clock extends React.Component {
   handleCalculateShape = () => {
     const { top, left, width } = this.refs.placeholder.getBoundingClientRect();
     this.setState({
-      center: { x: left + width / 2, y: top + width / 2 },
+      center: { x: left + width / 2 - window.scrollX, y: top + width / 2 - window.scrollX },
       radius: width / 2
     });
   };

components/time_picker/TimePickerDialog.jsx

@@ -26,8 +26,8 @@ class TimePickerDialog extends React.Component {
     displayTime: this.props.value
   };
 
-  componentWillUpdate (nextProps) {
-    if (!this.props.active && nextProps.active) {
+  componentDidUpdate (prevProps) {
+    if (!prevProps.active && this.props.active) {
       setTimeout(this.refs.clock.handleCalculateShape, 1000);
     }
   }

components/utils/events.js

@@ -1,23 +1,21 @@
 export default {
   getMousePosition (event) {
     return {
-      x: event.pageX,
-      y: event.pageY
+      x: event.pageX - window.scrollX,
+      y: event.pageY - window.scrollY
     };
   },
 
   getTouchPosition (event) {
     return {
-      x: event.touches[0].pageX,
-      y: event.touches[0].pageY
+      x: event.touches[0].pageX - window.scrollX,
+      y: event.touches[0].pageY - window.scrollY
     };
   },
 
   pauseEvent (event) {
     event.stopPropagation();
     event.preventDefault();
-    event.returnValue = false;
-    event.cancelBubble = true;
   },
 
   addEventsToDocument (eventMap) {