fix(all): long press now preserves activated state (#25551)

resolves #25544

core/src/utils/tap-click/index.ts

@@ -1,6 +1,5 @@
-import type { Config } from '../interface';
-
-import { now, pointerCoord } from './helpers';
+import type { Config } from '../../interface';
+import { now, pointerCoord } from '../helpers';
 
 export const startTapClick = (config: Config) => {
   let lastTouch = -MOUSE_WAIT * 10;
@@ -25,6 +24,11 @@ export const startTapClick = (config: Config) => {
   };
 
   const onMouseDown = (ev: MouseEvent) => {
+    // Ignore right clicks
+    if (ev.button === 2) {
+      return;
+    }
+
     const t = now(ev) - MOUSE_WAIT;
     if (lastTouch < t) {
       pointerDown(ev);
@@ -38,10 +42,6 @@ export const startTapClick = (config: Config) => {
     }
   };
 
-  const onContextMenu = (ev: MouseEvent) => {
-    pointerUp(ev);
-  };
-
   const cancelActive = () => {
     clearTimeout(activeDefer);
     activeDefer = undefined;
@@ -161,8 +161,6 @@ export const startTapClick = (config: Config) => {
 
   doc.addEventListener('mousedown', onMouseDown, true);
   doc.addEventListener('mouseup', onMouseUp, true);
-
-  doc.addEventListener('contextmenu', onContextMenu, true);
 };
 
 const getActivatableTarget = (ev: UIEvent): any => {

core/src/utils/tap-click/test/tap-click.e2e.ts

@@ -0,0 +1,21 @@
+import { test } from '@utils/test/playwright';
+
+test.describe('tap click utility', () => {
+  test('it should apply activated class when clicking element', async ({ page }) => {
+    await page.setContent(`
+      <ion-app>
+        <button class="ion-activatable">Click Me</button>
+      </ion-app>
+    `);
+
+    const button = page.locator('button');
+    const box = await button.boundingBox()!;
+
+    if (box) {
+      await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2);
+      await page.mouse.down();
+    }
+
+    await page.waitForSelector('button.ion-activated');
+  });
+});