diff --git a/core/src/utils/tap-click.ts b/core/src/utils/tap-click/index.ts similarity index 96% rename from core/src/utils/tap-click.ts rename to core/src/utils/tap-click/index.ts index a8e76d6876..656d52742e 100644 --- a/core/src/utils/tap-click.ts +++ b/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 => { diff --git a/core/src/utils/tap-click/test/tap-click.e2e.ts b/core/src/utils/tap-click/test/tap-click.e2e.ts new file mode 100644 index 0000000000..29512706c9 --- /dev/null +++ b/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(` + + + + `); + + 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'); + }); +});