From 356dc349a2c2303c8e0457fe15a0134f8c7eed3c Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Wed, 20 Mar 2024 17:08:57 -0400
Subject: [PATCH] refactor(tap-click): use pointer events api

---
 core/src/utils/tap-click/index.ts | 47 ++++---------------------------
 1 file changed, 6 insertions(+), 41 deletions(-)

diff --git a/core/src/utils/tap-click/index.ts b/core/src/utils/tap-click/index.ts
index 5b5f81e1c4e..c5a10595f47 100644
--- a/core/src/utils/tap-click/index.ts
+++ b/core/src/utils/tap-click/index.ts
@@ -1,14 +1,13 @@
 import { doc } from '@utils/browser';
 
 import type { Config } from '../../interface';
-import { now, pointerCoord } from '../helpers';
+import { pointerCoord } from '../helpers';
 
 export const startTapClick = (config: Config) => {
   if (doc === undefined) {
     return;
   }
 
-  let lastTouch = -MOUSE_WAIT * 10;
   let lastActivated = 0;
 
   let activatableEle: HTMLElement | undefined;
@@ -18,36 +17,6 @@ export const startTapClick = (config: Config) => {
   const useRippleEffect = config.getBoolean('animated', true) && config.getBoolean('rippleEffect', true);
   const clearDefers = new WeakMap<HTMLElement, any>();
 
-  // Touch Events
-  const onTouchStart = (ev: TouchEvent) => {
-    lastTouch = now(ev);
-    pointerDown(ev);
-  };
-
-  const onTouchEnd = (ev: TouchEvent) => {
-    lastTouch = now(ev);
-    pointerUp(ev);
-  };
-
-  const onMouseDown = (ev: MouseEvent) => {
-    // Ignore right clicks
-    if (ev.button === 2) {
-      return;
-    }
-
-    const t = now(ev) - MOUSE_WAIT;
-    if (lastTouch < t) {
-      pointerDown(ev);
-    }
-  };
-
-  const onMouseUp = (ev: MouseEvent) => {
-    const t = now(ev) - MOUSE_WAIT;
-    if (lastTouch < t) {
-      pointerUp(ev);
-    }
-  };
-
   const cancelActive = () => {
     if (activeDefer) clearTimeout(activeDefer);
     activeDefer = undefined;
@@ -57,8 +26,9 @@ export const startTapClick = (config: Config) => {
     }
   };
 
-  const pointerDown = (ev: UIEvent) => {
-    if (activatableEle) {
+  const pointerDown = (ev: PointerEvent) => {
+    // Ignore right clicks
+    if (activatableEle || ev.button === 2) {
       return;
     }
     setActivatedElement(getActivatableTarget(ev), ev);
@@ -151,9 +121,8 @@ export const startTapClick = (config: Config) => {
 
   doc.addEventListener('ionGestureCaptured', cancelActive);
 
-  doc.addEventListener('touchstart', onTouchStart, true);
-  doc.addEventListener('touchcancel', onTouchEnd, true);
-  doc.addEventListener('touchend', onTouchEnd, true);
+  doc.addEventListener('pointerdown', pointerDown, true);
+  doc.addEventListener('pointerup', pointerUp, true);
 
   /**
    * Tap click effects such as the ripple effect should
@@ -168,9 +137,6 @@ export const startTapClick = (config: Config) => {
    * ion-content's scroll events.
    */
   doc.addEventListener('pointercancel', cancelActive, true);
-
-  doc.addEventListener('mousedown', onMouseDown, true);
-  doc.addEventListener('mouseup', onMouseUp, true);
 };
 
 // TODO(FW-2832): type
@@ -213,4 +179,3 @@ const getRippleEffect = (el: HTMLElement) => {
 const ACTIVATED = 'ion-activated';
 const ADD_ACTIVATED_DEFERS = 100;
 const CLEAR_STATE_DEFERS = 150;
-const MOUSE_WAIT = 2500;