React: In mobile browsers button onClick hadler fires multiple times. Desktop ones are fine

[greenais]

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

What is the current behavior?
I have quite simple React page with download buttons embedded:

<button
  type='button'
  className='button'
  onClick={this._downloadArchive}
  style={{width: '100%'}}
  >
   <div style={styles.archiveButton}>
    <div>Download</div>
    <div>{'archive.zip'}</div>
    </div>
</button>

And correspomding handler:

_downloadArchive = () => {
  let filename = 'archive.zip';
  let url = '/beta/archive32?filename=' + filename + screenDetails;
  window.open(url)
};

In desktop browsers it works with no issue, but in all mobile browsers tapping button causes handler to be called multiple (3-4, depends on device and browser) times with 100-300ms delay between calls - I can see it in backend logs.
Meanwhile mobile browser downloads the file only once.
I ried to use onTouchEnd event (with detecting mobile client before) - result is the same

What is the expected behavior?
onClick handler is called once - as it should and as it is on desktop browsers

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?
"react": "16.4.0",
OS: Windows
Browsers; Chrome, Opera, CM Browser etc

[MuYunyun]

The code seems no problem, do you bind other events except onClick at the same time? (such as onMouseUp、onTouchEnd). If so, it'll be trigger much time in the mobile mode of chrome browser.

[greenais]

do you bind other events except onClick

No, above is exact code I use for button and handler. Moreover, I tried to prevent sequental handler firing by such approach

let downloadInProcess = false;
...
_downloadArchive = () => {
if (!downloadInProcess) {
   downloadInProcess = true;
   let filename = 'archive.zip';
  let url = '/beta/archive32?filename=' + filename + screenDetails;
  window.open(url)
}
};

with no good - behaviour is the same. The only reason for that I can guess is that onClick creates several independent handler functions so all of them pass downloadInProcess check

[malcolm-kee]

@greenais is it possible for you to provide a simple issue reproduction in Codesandbox? That would makes the discussion and investigation faster.

[greenais]

Yes, it is.
https://codesandbox.io/s/nifty-bassi-z82c7
I replaced my backend call with opening google.com, but I'm not sure if it's relevant - as in my case backend (on Node/Express) responds with res.download(file), probably it changes picture for mobile browsers with window.open(url).
Wait, could it be possible that handler fires one time as it should but window.open(url) on mobile somehow "flickers" producing 3-4 calls in row?

[malcolm-kee]

@greenais the link is only the preview. Would be great if you can share the code as well.

[greenais]

Ups, sorry, never used this sandbox before.
Updated link above

[embeddedt]

Personally, I think the easiest way to check if this is really a React problem or not is to try it with a pure DOM element and see what happens.

I put together a quick test fiddle that you should be able to try in your browser. See if it registers 3 clicks whenever you touch the button the same way you do in React.

I think what's most likely to be happening is that, as far as the browser is concerned, you are touching the button three times (this can happen especially often if you have an old/broken touchscreen, in my experience).

[greenais]

@embeddedt I already tried this in plain DOM similar to what you suggested - handler fires once as it should. The thing is that in the real case it fires window.open(url) with backend response of res.download(file) wich is quite different form just counter increase.
My React app is in prod now so it's quite difficult to replace download part with plain html, unfortunately..
Tapping 3-4 times and old/broken touchscreen sounds funny as it happens in _every_ download request from _every_ mobile browser of my users - it's hundreds)

[malcolm-kee]

@greenais is your project open source? It's very hard for us to help or React team to fix if there is no sample that we can just run and verify that it's broken.

If that's not possible, could you share the particular file that includes the component that is having issue?

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contribution.

[stale[bot]]

Closing this issue after a prolonged period of inactivity. If this issue is still present in the latest release, please create a new issue with up-to-date information. Thank you!