From 90f98ec790251299ea609778a1b96360ea08c374 Mon Sep 17 00:00:00 2001
From: Pavel Pomerantsev <pomerantsevp@gmail.com>
Date: Thu, 16 Apr 2015 14:05:52 +0300
Subject: [PATCH 1/2] Make touch-ripple properly react to touch events

Fixes #542.
---
 src/js/ripples/touch-ripple.jsx | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/js/ripples/touch-ripple.jsx b/src/js/ripples/touch-ripple.jsx
index 8663cae0e0f8ab..7c4ff8eb1a96a7 100644
--- a/src/js/ripples/touch-ripple.jsx
+++ b/src/js/ripples/touch-ripple.jsx
@@ -121,6 +121,10 @@ var TouchRipple = React.createClass({
   },
 
   _handleTouchEnd: function(e) {
+    // Prevent mouse events from firing on touch-enabled devices.
+    if (e.cancelable) {
+      e.preventDefault();
+    }
     this.end();
   },
 
@@ -130,8 +134,9 @@ var TouchRipple = React.createClass({
     var elHeight = el.offsetHeight;
     var elWidth = el.offsetWidth;
     var offset = Dom.offset(el);
-    var pageX = e.pageX == undefined ? e.nativeEvent.pageX : e.pageX;
-    var pageY = e.pageY == undefined ? e.nativeEvent.pageY : e.pageY;
+    var isTouchEvent = e.touches && e.touches.length;
+    var pageX = isTouchEvent ? e.touches[0].pageX : e.pageX;
+    var pageY = isTouchEvent ? e.touches[0].pageY : e.pageY;
     var pointerX = pageX - offset.left;
     var pointerY = pageY - offset.top;
     var topLeftDiag = this._calcDiag(pointerX, pointerY);

From 236fcf9d786fe73bc5de3387e97de42cc563e79f Mon Sep 17 00:00:00 2001
From: Pavel Pomerantsev <pomerantsevp@gmail.com>
Date: Mon, 20 Apr 2015 16:50:02 +0300
Subject: [PATCH 2/2] Fix issue: focus event stopped firing because of
 preventDefault

---
 src/js/ripples/touch-ripple.jsx | 20 ++++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/js/ripples/touch-ripple.jsx b/src/js/ripples/touch-ripple.jsx
index 7c4ff8eb1a96a7..20de9a5e95a03c 100644
--- a/src/js/ripples/touch-ripple.jsx
+++ b/src/js/ripples/touch-ripple.jsx
@@ -18,7 +18,8 @@ var TouchRipple = React.createClass({
         key: 0,
         started: false,
         ending: false
-      }]
+      }],
+      touchInProgress: false
     };
   },
 
@@ -105,15 +106,15 @@ var TouchRipple = React.createClass({
 
   _handleMouseDown: function(e) {
     //only listen to left clicks
-    if (e.button === 0) this.start(e);
+    if (e.button === 0 && !this.state.touchInProgress) this.start(e);
   },
 
   _handleMouseUp: function(e) {
-    this.end();
+    if (!this.state.touchInProgress) this.end();
   },
 
   _handleMouseOut: function(e) {
-    this.end();
+    if (!this.state.touchInProgress) this.end();
   },
 
   _handleTouchStart: function(e) {
@@ -121,10 +122,13 @@ var TouchRipple = React.createClass({
   },
 
   _handleTouchEnd: function(e) {
-    // Prevent mouse events from firing on touch-enabled devices.
-    if (e.cancelable) {
-      e.preventDefault();
-    }
+    this.setState({ touchInProgress: true });
+    setTimeout(function () {
+      if (this.isMounted()) {
+        this.setState({ touchInProgress: false });
+      }
+    }.bind(this), 100);
+
     this.end();
   },