Fixed double ripple due to compat mouse down (issue 1563)

CHANGELOG.md

@@ -1,3 +1,20 @@
+## 0.13.3
+###### _Nov 17, 2015_
+
+##### General
+- [Snackbar] add bodyStyle prop to style child div (#2104)
+- [DatePicker] add container prop to display DatePicker in-line or inside Dialog (#2120 and #2153)
+- [AppBar] add relative positioning for z-index to take effect (#1478)
+- [AppBar] add onTitleTouchTap prop to AppBar (#2125)
+- [Popover] new component! (#2043) (thanks @chrismcv)
+- Split [SelectField] and [TextField] doc pages (#2161)
+
+##### Component Fixes / Enhancements
+- [SelectField] onChange triggered consistently when using value prop (#1610)
+- [Dialog] fix page scrolling behind dialog after resizing (#1946)
+- [DatePicker] fix calendar height (#2141)
+- [TimePicker] allow to set time to null (#2108)
+
 ## 0.13.2
 ###### _Nov 9, 2015_
 

docs/package.json

@@ -1,6 +1,6 @@
 {
   "name": "material-ui-docs",
-  "version": "0.13.2",
+  "version": "0.13.3",
   "description": "Documentation site for material-ui",
   "repository": {
     "type": "git",

package.json

@@ -1,7 +1,7 @@
 {
   "name": "material-ui",
   "author": "Call-em-all Engineering Team",
-  "version": "0.13.2",
+  "version": "0.13.3",
   "description": "Material Design UI components built with React",
   "main": "./lib",
   "scripts": {

src/ripples/touch-ripple.jsx

@@ -20,6 +20,12 @@ const TouchRipple = React.createClass({
   },
 
   getInitialState() {
+    //Touch start produces a mouse down event for compat reasons. To avoid
+    //showing ripples twice we skip showing a ripple for the first mouse down
+    //after a touch start. Note we don't store ignoreNextMouseDown in this.state
+    //to avoid re-rendering when we change it
+    this._ignoreNextMouseDown = false;
+
     return {
       //This prop allows us to only render the ReactTransitionGroup
       //on the first click of the component, making the inital
@@ -74,16 +80,13 @@ const TouchRipple = React.createClass({
   },
 
   start(e, isRippleTouchGenerated) {
-    let ripples = this.state.ripples;
-
-    //Do nothing if we're starting a click-event-generated ripple
-    //while having touch-generated ripples
-    if (!isRippleTouchGenerated) {
-      for (let i = 0; i < ripples.length; i++) {
-        if (ripples[i].props.touchGenerated) return;
-      }
+    if (this._ignoreNextMouseDown && !isRippleTouchGenerated) {
+      this._ignoreNextMouseDown = false;
+      return;
     }
 
+    let ripples = this.state.ripples;
+
     //Add a ripple to the ripples array
     ripples = ImmutabilityHelper.push(ripples, (
       <CircleRipple
@@ -94,6 +97,7 @@ const TouchRipple = React.createClass({
         touchGenerated={isRippleTouchGenerated} />
     ));
 
+    this._ignoreNextMouseDown = isRippleTouchGenerated;
     this.setState({
       hasRipples: true,
       nextKey: this.state.nextKey + 1,