feat: Ignore touch on more interactive elements

Fixes #1654.
birchill · Mar 19, 2024 · 472280e · 472280e
1 parent cbb94e3
commit 472280e
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 3 deletions.
diff --git a/src/content/content.ts b/src/content/content.ts
@@ -56,7 +56,7 @@ import {
   ContentConfigParams,
 } from '../common/content-config-params';
 import { CopyKeys, CopyType } from '../common/copy-keys';
-import { isEditableNode } from '../utils/dom-utils';
+import { isEditableNode, isInteractiveElement } from '../utils/dom-utils';
 import {
   addMarginToPoint,
   getMarginAroundPoint,
@@ -301,9 +301,11 @@ export class ContentHandler {
 
     this.touchClickTracker.onTouchClick = (event: MouseEvent) => {
       // Ignore clicks on interactive elements
+      const possibleTargetElem = event.target as Element | null;
       if (
-        event.target instanceof HTMLAnchorElement ||
-        event.target instanceof HTMLButtonElement
+        possibleTargetElem != null &&
+        possibleTargetElem.nodeType === Node.ELEMENT_NODE &&
+        isInteractiveElement(possibleTargetElem)
       ) {
         return;
       }

diff --git a/src/utils/dom-utils.ts b/src/utils/dom-utils.ts
@@ -39,6 +39,24 @@ export function isEditableNode(node: Node | null): boolean {
   return isTextInputNode(node) || isContentEditableNode(node);
 }
 
+/**
+ * Tests whether an element is 'interactive', i.e. an element
+ * that we should not do lookups on when tapped on mobile.
+ */
+export function isInteractiveElement(elem: Element) {
+  return (
+    elem.tagName === 'A' ||
+    elem.tagName === 'BUTTON' ||
+    elem.tagName === 'INPUT' ||
+    elem.tagName === 'TEXTAREA' ||
+    elem.tagName === 'SELECT' ||
+    elem.tagName === 'DATALIST' ||
+    elem.tagName === 'OPTGROUP' ||
+    elem.tagName === 'OPTION' ||
+    isContentEditableNode(elem)
+  );
+}
+
 export interface Focusable {
   focus(): void;
 }