Suppress iOS long touch behavior in network list.

When a user long touches on iOS, they will select the nearest
selectable text. This causes a distracting visual bug when reordering
the network list (which also uses a long press).
This commit is contained in:
itsjohncs 2021-10-10 14:38:06 -07:00
parent a48f449c59
commit 5c614785bf
2 changed files with 19 additions and 0 deletions

View File

@ -81,6 +81,9 @@
class="network"
role="region"
aria-live="polite"
@touchstart="onDraggableTouchStart"
@touchend="onDraggableTouchEnd"
@touchcancel="onDraggableTouchEnd"
>
<NetworkLobby
:network="network"
@ -332,6 +335,18 @@ export default {
onDraggableUnchoose(event) {
event.item.classList.remove("ui-sortable-dragging-touch-cue");
},
onDraggableTouchStart() {
if (event.touches.length === 1) {
// This prevents an iOS long touch default behavior: selecting
// the nearest selectable text.
document.body.classList.add("force-no-select");
}
},
onDraggableTouchEnd(event) {
if (event.touches.length === 0) {
document.body.classList.remove("force-no-select");
}
},
toggleSearch(event) {
if (isIgnoredKeybind(event)) {
return true;

View File

@ -107,6 +107,10 @@ body {
overflow: hidden; /* iOS Safari requires overflow rather than overflow-y */
}
body.force-no-select * {
user-select: none !important;
}
a,
a:hover,
a:focus {