From 00d4cdf4d6504498092ade5a68eef388cd026ccd Mon Sep 17 00:00:00 2001
From: Lars den Bakker <larsdenbakker@gmail.com>
Date: Fri, 3 May 2019 21:17:29 +0200
Subject: [PATCH] Allow configuring cancelling synthetic click behavior

---
 lib/utils/gestures.js   | 13 +++++++++----
 lib/utils/settings.js   | 18 ++++++++++++++++++
 test/unit/gestures.html | 26 ++++++++++++++++++++++++++
 3 files changed, 53 insertions(+), 4 deletions(-)

diff --git a/lib/utils/gestures.js b/lib/utils/gestures.js
index f5f4bfd680..e6c8416b6e 100644
--- a/lib/utils/gestures.js
+++ b/lib/utils/gestures.js
@@ -25,7 +25,7 @@ import './boot.js';
 
 import { timeOut, microTask } from './async.js';
 import { Debouncer } from './debounce.js';
-import { passiveTouchGestures } from './settings.js';
+import { passiveTouchGestures, cancelSyntheticClickEvents } from './settings.js';
 import { wrap } from './wrap.js';
 
 // detect native touch action support
@@ -221,6 +221,9 @@ function setupTeardownMouseCanceller(setup) {
 }
 
 function ignoreMouse(e) {
+  if (!cancelSyntheticClickEvents) {
+    return;
+  }
   if (!POINTERSTATE.mouse.mouseIgnoreJob) {
     setupTeardownMouseCanceller(true);
   }
@@ -328,9 +331,11 @@ function untrackDocument(stateObj) {
   stateObj.upfn = null;
 }
 
-// use a document-wide touchend listener to start the ghost-click prevention mechanism
-// Use passive event listeners, if supported, to not affect scrolling performance
-document.addEventListener('touchend', ignoreMouse, SUPPORTS_PASSIVE ? {passive: true} : false);
+if (cancelSyntheticClickEvents) {
+  // use a document-wide touchend listener to start the ghost-click prevention mechanism
+  // Use passive event listeners, if supported, to not affect scrolling performance
+  document.addEventListener('touchend', ignoreMouse, SUPPORTS_PASSIVE ? {passive: true} : false);
+}
 
 /**
  * Returns the composedPath for the given event.
diff --git a/lib/utils/settings.js b/lib/utils/settings.js
index 6b878c4ed1..017278ddc5 100644
--- a/lib/utils/settings.js
+++ b/lib/utils/settings.js
@@ -158,3 +158,21 @@ export let syncInitialRender = false;
 export const setSyncInitialRender = function(useSyncInitialRender) {
   syncInitialRender = useSyncInitialRender;
 };
+
+/**
+ * Setting to cancel synthetic click events fired by older mobile browsers. Modern browsers
+ * no longer fire synthetic click events, and the cancellation behavior can interfere
+ * when programmatically clicking on elements.
+ */
+export let cancelSyntheticClickEvents = true;
+
+/**
+ * Sets `setCancelSyntheticEvents` globally for all elements to cancel synthetic click events.
+ *
+ * @param {boolean} useCancelSyntheticClickEvents enable or disable cancelling synthetic
+ * events
+ * @return {void}
+ */
+export const setCancelSyntheticClickEvents = function(useCancelSyntheticClickEvents) {
+  cancelSyntheticClickEvents = useCancelSyntheticClickEvents;
+};
diff --git a/test/unit/gestures.html b/test/unit/gestures.html
index ddfb1fa20d..f09b25cd59 100644
--- a/test/unit/gestures.html
+++ b/test/unit/gestures.html
@@ -24,6 +24,7 @@
   <script type="module">
 import './gestures-elements.js';
 import { afterNextRender } from '../../lib/utils/render-status.js';
+import { setCancelSyntheticClickEvents } from '../../lib/utils/settings.js';
 import { resetMouseCanceller, deepTargetFind, recognizers, addListener, removeListener } from '../../lib/utils/gestures.js';
 
 suite('simulate events', function() {
@@ -104,6 +105,31 @@
   });
 });
 
+suite('cancelling synthetic click events disabled', () => {
+  setup(() => {
+    setCancelSyntheticClickEvents(false);
+  });
+
+  teardown(() => {
+    setCancelSyntheticClickEvents(true);
+  });
+
+  test('HTMLElement.click triggers a click event', function(done) {
+    const buttonA = document.createElement('button');
+    const buttonB = document.createElement('button');
+    document.body.appendChild(buttonA);
+    document.body.appendChild(buttonB);
+    buttonB.addEventListener('click', () => {
+      buttonB.parentElement.removeChild(buttonA);
+      buttonB.parentElement.removeChild(buttonB);
+      done();
+    });
+    // simulate a user click on a button on a touch device
+    buttonA.dispatchEvent(new CustomEvent('touchend', { bubbles: true }));
+    buttonB.click();
+  });
+});
+
 suite('Event Setup and Teardown', function() {
   var outer, inner;
   suiteSetup(function(done) {