touchstart preventDefault() does not prevent click event.

[benwiley4000]

Do you want to request a feature or report a bug?
Bug

What is the current behavior?
Calling e.preventDefault() on a synthetic onTouchStart event fails to prevent the click event. I also tried e.nativeEvent.preventDefault(), but this didn't make any difference.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://jsfiddle.net or similar (template: https://jsfiddle.net/84v837e9/).

Here's a div which is supposed to handle a hover case but not process a click the first time is is tapped via touch (click on desktop is fine). However tapping with touch (on a mobile device or using dev tools touch emulation) will trigger both touchstart and click immediately.

jsfiddle

const style = {
  background: 'red',
  width: 100,
  height: 100,
  // to ensure `touchstart` `preventDefault()` is allowed on mobile
  touchAction: 'none'
};

class SomeButton extends React.Component {
  constructor (props) {
    super(props);

    this.state = {
      hover: false,
      click: false
    };
  }

  render () {
    return (
      <div
        style={style}
        onMouseEnter={() => this.setState({ hover: true })}
        onClick={() => this.setState({ click: true })}
        onTouchStart={e => {
          if (!this.state.hover) {
            e.preventDefault(); // doesn't work!
            this.setState({ hover: true });
          }
        }}
      >
        {this.state.hover && 'hover!'}
        {this.state.click && 'click!'}
      </div>
    );
  }
}

However if I move the touchstart listener to componentDidMount and use the normal DOM API, everything works:

jsfiddle

// ...
class SomeButton extends React.Component {
  constructor (props) {
    // ...
  }
  
  componentDidMount () {
    this.elem.addEventListener('touchstart', e => {
      if (!this.state.hover) {
        e.preventDefault(); // WORKS!
        this.setState({ hover: true });
      }
    });
  }

  render () {
    return (
      <div
        ref={elem => this.elem = elem}
        { /* ... (removed onTouchStart) ... */}
      >
        {/* ... */}
      </div>
    );
  }
}

What is the expected behavior?
The first time a touchstart is processed, we only treat it as a hover, and wait to process the click event until after the next touchstart. If the pointer is a mouse, both events can be processed at once.

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
React 15.5.4. Not sure about previous React versions. Chrome for Android, Chrome for Mac emulating touch, Firefox for Mac emulating touch.

[EnoahNetzach]

Just for completeness, it works as expected on Firefox 53.0.2 on Android 6.0.1, while on chromium based browsers I still get the issue.

[benwiley4000]

@EnoahNetzach I became curious after your comment so I tested again...

What I'm finding that is peculiar now is that in Chrome for Mac (58.0.3029.110) emulating touch, the second example solves the issue... but in Firefox for Mac (53.0.3) emulating touch, neither example works as desired!

For the record, the Touch Events spec is clear about what should happen.

[EnoahNetzach]

Adding to the list, in safari on iOS 10.3 (simulated) works as expected..

[nhunzaker]

Hmm. Bummer. Thanks everyone for digging into this. We should do the following:

1. Produce a test case that does not use React.
2. Produce a test case for our DOM fixture manual test suite

Additionally, I have a PR out that attaches touch listeners local to an element. I am curious if this might have an unexpected side-effect of fixing this issue (assuming it's a React issue):

#9333

[benwiley4000]

@nhunzaker: thanks! Based on the findings so far I suspect that PR might solve the issue (except for Firefox for Mac [not mobile] where it appears to persist regardless).. Would there be an easy way to test it with my code?

[nhunzaker]

I have a custom build up for that branch, you could pull in React and ReactDOM from:

React:
https://nh-dom-fixtures-scroll.surge.sh/react.development.js

ReactDOM:
https://nh-dom-fixtures-scroll.surge.sh/react-dom.development.js

I've forked and updated your gist with those scripts here:
http://jsfiddle.net/69z2wepo/79803/

Though I won't be able to dig into testing it myself until later today or tomorrow.

[benwiley4000]

@nhunzaker thank you.

I tested just now (using Chrome for Android and Chrome with emulated touch for Mac). Unfortunately the behavior seems to be the same.

[benwiley4000]

@nhunzaker here is the non-React comparison case you asked for. https://jsfiddle.net/a2k4whf0/2/

[gaearon]

@nhunzaker What's the next step here?

[OZhurbenko]

It would be great if this was fixed at some point.
I was very confused about this behavior, especially after I saw Chromium response saying that everything works as expected, but it clearly didn't.

if I move the touchstart listener to componentDidMount and use the normal DOM API, everything works

Thanks, that worked for me.

[OZhurbenko]

Hmm.. actually "normal DOM API" solution didn't work.
It didn't fix it for Firefox for Android, there's a bug there. Firefox triggers mousedown-mousemove-mouseup events following touchstart no matter what😕

Had to work around that and add a flag to the touchStart handler:

handleTouchStart(event) {
  this.hasBeenTouchedRecently = true;
  setTimeout(() => { this.hasBeenTouchedRecently = false; }, 500);
  ...
}

And a simple return from mouseDown handler:

  handleMouseDown(event) {
    if(this.hasBeenTouchedRecently) {
      return;
    }
  ...

In this case it doesn't matter how you add "touchstart" event listener, I did it via standard React way.

[RandScullard]

Any update on this? It's been nearly eight months and this is still an issue. I was able to work around it with a solution similar to the one suggested by @OZhurbenko, but it would be really nice to see this fixed.