From 500854d9299e70a645218d1fe427c616319ef701 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Thu, 21 Mar 2024 14:02:38 -0400
Subject: [PATCH] refactor(tap-click): use pointer events api (#29192)

Issue number: Internal

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the current behavior?
<!-- Please describe the current behavior that you are modifying. -->

[Amanda pointed out that the ripple effect for the Button inside of
InputPasswordToggle was not
working](https://github.com/ionic-team/ionic-framework/pull/29175#discussion_r1532627841).
I found out that calling `ev.preventDefault` on `pointerdown` causes
`mouseup` to not get fired. On desktop, we rely on `mouseup` to know
when to add the ripple effect. (`touchend` is not impacted)

Interestingly, calling `ev.preventDefault` on `pointerdown` does **not**
prevent `pointerup` from being fired. The idea here is that if we
migrate the tap click utility to use the PointerEvents API instead of
separate mouse/touch listeners we can keep the existing tap click
behavior while also fixing the bug that Amanda noted.

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->

- Tap click nows listens for the Pointer Events instead of separate
mouse/touch events

Impact to developers is fairly minimal. There should be no behavior
change (other than the bug I noted being fixed). There should be a very
small perf boost because this util now only adds 4 event listeners on
the document instead of 7 previously.

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer
for more information.
-->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->


Reviewers: Please manually test this on desktop devices as well as iOS
and Android devices (not Chrome Dev Tools. iOS simulators are fine).
Test that components such as `ion-button` correctly add the activated
state (or ripple effect for MD). Also verify that the activated state is
not added when tapping the button and then scrolling. For desktop, check
that right clicking does not add the activated state.
---
 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 5b5f81e1c4..c5a10595f4 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;