Issue 1:
The deployed (minimal, trimmed down) app is at:

http://www.baharev.info/sandbox/eventbug/

and the entire source code is at:

https://github.com/baharev/eventbug

Clicking or touching either square should make the clicked / touched square disappear, but only that square. Everything works as intended on my desktop machine both in Chrome and in Firefox. It also shows the correct behavior in Safari on iOS (and I don't care about IE or Edge).

The following triggers the bug in Chrome, either on an Android tablet, or on my desktop machine when emulating a hand-held device. Reload the app, and touch or click the top (blue) square: Both squares disappear, and in the console log I see that the not clicked, and not touched bottom green square received a spurious mousedown event (which then deleted it).

There is touch-action: none; in the app.css applied on the squares. If I didn't use it, I would get the following warning in Chrome when emulating a hand-held device:

[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See: https://www.chromestatus.com/features/5093566007214080

With touch-action: none; (the way it is in the deployed app), this warning goes away.

Is the ghost mousedown event due to a bug in my code?

Or is it a bug in React?

Or is it a bug in Chrome?

How can I resolve this issue? (I am looking for a workaround if the bug is not in my code.)

Issue 2:
Describe what you were doing when the bug occurred:

I opened my project ("react": "16.9.0")

Start profiling

Do my actions

4, Stop profiling

Please do not remove the text below this line

DevTools version: 4.7.0-23309eb38

Call stack: at N (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40:164715)

at I (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40:163705)

at e.getCommitTree (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40:166664)

at Ul (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40:342328)

at gi (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32:62450)

at tl (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32:71793)

at zl (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32:113765)

at Ic (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32:104502)

at Tc (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32:104430)

at Dc (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:32:104298)

Component stack: at Ul (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40:342099)

at div

at div

at div

at Co (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40:263571)

at chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40:366677

at n (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40:276314)

at chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40:278724

at div

at div

at Xi (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40:325177)

at Ge (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40:207026)

at sn (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40:216342)

at Va (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40:293773)

at us (chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/main.js:40:371869)