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.
We have included the react-tap-event-plugin
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.
This is a simplified version of what our component looks like:
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 = (
<div>
<button onTouchTap={this.finish}>Finish</button>
</div>
)
if (!this.state.complete) {
return (
<Dialog open actions={actions}>
<h3>Dialog header</h3>
<p>Dialog text</p>
</Dialog>
)
}
return null
}
}
It's when that action button "Finish" is clicked that the dialog closes and then an element behind it also receives a touchTap event.
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.
What am I doing wrong? Any advice would be appreciated.