devsyncwrld/backspace
1
0
Fork 0
Code Issues Pull Requests Actions 26 Packages Projects Releases Wiki Activity

fix: prevent native text selection on mobile long-press

Browse Source 
iOS triggered both the app context menu and native text selection overlay
on long-press. Three-layer fix: CSS user-select:none on buttons/[role=button]/
[data-context-menu] elements; non-passive touchstart listener with conditional
preventDefault on context-menu targets; removeAllRanges() at timer fire to
clear any residual selection. Added data-context-menu to all mobile surfaces
that use onContextMenu handlers.
This commit is contained in:
Jannis Braun
2026-03-23 21:12:06 +01:00
parent 161e876df8
commit 9f8a4ffa90
7 changed files with 19 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/web/src/components/ui/ContextMenuRenderer.tsx
+5 -1
View File
@@ -550,6 +550,10 @@ function useGlobalLongPress(isMobile: boolean) {
};
const onTouchStart = (e: TouchEvent) => {
const target = e.target as HTMLElement;
if (target.closest('[data-context-menu]')) {
e.preventDefault();
}
if (e.touches.length !== 1) { cancel(); return; }
const touch = e.touches[0]!;
originX = touch.clientX;
@@ -600,7 +604,7 @@ function useGlobalLongPress(isMobile: boolean) {
}
};
document.addEventListener('touchstart', onTouchStart, { passive: true });
document.addEventListener('touchstart', onTouchStart, { passive: false });
document.addEventListener('touchmove', onTouchMove, { passive: true });
document.addEventListener('touchend', onTouchEnd, { passive: true });
document.addEventListener('touchcancel', onTouchEnd, { passive: true });