<p dir="auto">v1-beta12</p>
<p dir="auto">As per title. If you swipe on an element with a button/button base (i.e. a list item with an action on it), the ripple effect fires.</p>
<p dir="auto">This isn't usually that bad of a problem, however if you are scrolling through a list of items with actions on mobile it is really jarring and janky.</p>
<p dir="auto">As you tap to scroll, the ripple fires on the element you started your tap swipe on.<br>
It's misleading for the user (as releasing your finger doesn't actually fire the onclick handler), and it looks plain old janky.</p>
<p dir="auto">The solution (i think) would be to wait a few cycles before firing the ripple, and cancelling the ripple if there was pointer movement above a certain threshold.</p>
<p dir="auto">In a case of mine, I am opening a slider onClick and then unmounting it through render logic.</p>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> I have searched the <a href="https://github.com/callemall/material-ui/issues">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Expected Behavior</h2>
<p dir="auto">Should not throw an error to a reference</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="Uncaught TypeError: Cannot read property 'getBoundingClientRect' of null(…)getTrackOffset @ Slider.js:594(anonymous function) @ makeAssimilatePrototype.js:15(anonymous function) @ Slider.js:634 "><pre class="notranslate"><code class="notranslate">Uncaught TypeError: Cannot read property 'getBoundingClientRect' of null(…)getTrackOffset @ Slider.js:594(anonymous function) @ makeAssimilatePrototype.js:15(anonymous function) @ Slider.js:634 
</code></pre></div>
<h2 dir="auto">Current Behavior</h2>
<p dir="auto">Throws a reference error on an event after its unmounted</p>
<h2 dir="auto">Steps to Reproduce (for bugs)</h2>
<p dir="auto">Basically mount the slider, but then stop rendering it on an if statement.</p>
<p dir="auto">There are some events that you have not cleaned up?</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="        if (!this.state.DurationSliderOpen) {
          this.buttons.push(&lt;CanvasBox name=&quot;Duration&quot; dimensions={this.calc.Presentation.Duration} onClick={() =&gt; {
            this.setComponentState({DurationSliderOpen: true});
          }}&gt;
            &lt;CanvasText percentSize={.3}&gt;
              &lt;IconButton  style={{paddingTop: 9}}&gt;&lt;Down color={&quot;white&quot;}/&gt;&lt;/IconButton&gt;&lt;span style={{color: &quot;white&quot;}}&gt;Duration: {this.parentState.Room.VideoConference.Duration} minutes&lt;/span&gt;
            &lt;/CanvasText&gt;
          &lt;/CanvasBox&gt;);
        } else {
          this.buttons.push(&lt;CanvasBox name=&quot;Duration&quot; dimensions={this.calc.Presentation.Duration}&gt;
            &lt;span&gt;&lt;Slider onChange={(e, v) =&gt; {
              session_functions.VelocityDump(e,v )
              this.setParentState({
                Room: {
                  VideoConference: {
                    Duration: v.toString()
                  }
                }
              });
            }} onDragStop={(e, v) =&gt; {
                this.setComponentState({
                  DurationSliderOpen: false,
                }, () =&gt; {
                  this.setParentState({
                    Room: {
                      VideoConference: {
                        Duration: this.parentState.Room.VideoConference.Duration.toString()
                      }
                    }
                  }, () =&gt; {
                    window.api.post({action:&quot;RoomSave&quot;, state: this.parentState, leaveStateAlone:true});
                  });
                });
            }} min={30} max={240} step={5} value={parseInt(this.parentState.Room.VideoConference.Duration)} style={{widht: 218}}/&gt;&lt;/span&gt;
          &lt;/CanvasBox&gt;);
        }"><pre class="notranslate"><code class="notranslate">        if (!this.state.DurationSliderOpen) {
          this.buttons.push(&lt;CanvasBox name="Duration" dimensions={this.calc.Presentation.Duration} onClick={() =&gt; {
            this.setComponentState({DurationSliderOpen: true});
          }}&gt;
            &lt;CanvasText percentSize={.3}&gt;
              &lt;IconButton  style={{paddingTop: 9}}&gt;&lt;Down color={"white"}/&gt;&lt;/IconButton&gt;&lt;span style={{color: "white"}}&gt;Duration: {this.parentState.Room.VideoConference.Duration} minutes&lt;/span&gt;
            &lt;/CanvasText&gt;
          &lt;/CanvasBox&gt;);
        } else {
          this.buttons.push(&lt;CanvasBox name="Duration" dimensions={this.calc.Presentation.Duration}&gt;
            &lt;span&gt;&lt;Slider onChange={(e, v) =&gt; {
              session_functions.VelocityDump(e,v )
              this.setParentState({
                Room: {
                  VideoConference: {
                    Duration: v.toString()
                  }
                }
              });
            }} onDragStop={(e, v) =&gt; {
                this.setComponentState({
                  DurationSliderOpen: false,
                }, () =&gt; {
                  this.setParentState({
                    Room: {
                      VideoConference: {
                        Duration: this.parentState.Room.VideoConference.Duration.toString()
                      }
                    }
                  }, () =&gt; {
                    window.api.post({action:"RoomSave", state: this.parentState, leaveStateAlone:true});
                  });
                });
            }} min={30} max={240} step={5} value={parseInt(this.parentState.Room.VideoConference.Duration)} style={{widht: 218}}/&gt;&lt;/span&gt;
          &lt;/CanvasBox&gt;);
        }
</code></pre></div>
<h2 dir="auto">Context</h2>
<p dir="auto">None.</p>
<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>Material-UI</td>
<td>0.18.6</td>
</tr>
<tr>
<td>React</td>
<td>15.4.2</td>
</tr>
<tr>
<td>browser</td>
<td>Linux    Version 54.0.2840.90 (64-bit)</td>
</tr>
<tr>
<td>etc</td>
<td></td>
</tr>
</tbody>
</table>