feat: Ignore touch on more interactive elements

Fixes #1654.
birchill · Mar 20, 2024 · 455d21d · 455d21d
1 parent cbb94e3
commit 455d21d
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 5 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,10 +301,7 @@ export class ContentHandler {
 
     this.touchClickTracker.onTouchClick = (event: MouseEvent) => {
       // Ignore clicks on interactive elements
-      if (
-        event.target instanceof HTMLAnchorElement ||
-        event.target instanceof HTMLButtonElement
-      ) {
+      if (event.target instanceof Node && isInteractiveElement(event.target)) {
         return;
       }
 

diff --git a/src/utils/dom-utils.ts b/src/utils/dom-utils.ts
@@ -39,6 +39,25 @@ 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(node: Node | null) {
+  return (
+    isContentEditableNode(node) ||
+    (isElement(node) &&
+      (node.tagName === 'A' ||
+        node.tagName === 'BUTTON' ||
+        node.tagName === 'INPUT' ||
+        node.tagName === 'TEXTAREA' ||
+        node.tagName === 'SELECT' ||
+        node.tagName === 'DATALIST' ||
+        node.tagName === 'OPTGROUP' ||
+        node.tagName === 'OPTION'))
+  );
+}
+
 export interface Focusable {
   focus(): void;
 }