title: onTouchTap firing twice with material-ui dialog
body: <p>We have built a React project that is using Material-ui to show dialog boxes. For some reason, when you click a button which triggers the dialog to open, a second touch event seems to fire which will potentially trigger a link or button that is on the dialog box. A similar issue happens when you close the dialog box by clicking on a button. When doing this, the dialog closes, but will trigger another touch event on an element that is directly behind the element you clicked on.</p>
  
  <p>We have included the <code>react-tap-event-plugin</code> in order to use Material-ui and the app works really well as long as there aren't 2 elements overlapping on this ghost tap behaviour. </p>
  
  <p>This is a simplified version of what our component looks like:</p>
  
  <pre><code>import React, { Component } from 'react'
  import Dialog from 'material-ui/Dialog'
  
  class Introduction extends Component {
    constructor(props) {
      super(props)
  
      this.state = { complete: false }
  
      this.finish = this.finish.bind(this)
    }
  
    finish() {
      this.setState({ complete: true })
    }
  
    render() {
      const actions = (
        &lt;div&gt;
          &lt;button onTouchTap={this.finish}&gt;Finish&lt;/button&gt;
        &lt;/div&gt;
      )
  
      if (!this.state.complete) {
        return (
          &lt;Dialog open actions={actions}&gt;
            &lt;h3&gt;Dialog header&lt;/h3&gt;
            &lt;p&gt;Dialog text&lt;/p&gt;
          &lt;/Dialog&gt;
        )
      }
  
      return null
    }
  }
  </code></pre>
  
  <p>It's when that action button "Finish" is clicked that the dialog closes and then an element behind it also receives a touchTap event.</p>
  
  <p>If it makes a difference, we are using Cordova to wrap the app for mobile. We are experiencing this issue only on mobile (definitely on iOS), but also on device mode while testing in Chrome.</p>
  
  <p>What am I doing wrong? Any advice would be appreciated.</p>