From 5c614785bf95d32d71d69444c6f817c5e586da19 Mon Sep 17 00:00:00 2001
From: itsjohncs <johnsullivan.pem@gmail.com>
Date: Sun, 10 Oct 2021 14:38:06 -0700
Subject: [PATCH] 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).
---
 client/components/NetworkList.vue | 15 +++++++++++++++
 client/css/style.css              |  4 ++++
 2 files changed, 19 insertions(+)

diff --git a/client/components/NetworkList.vue b/client/components/NetworkList.vue
index 97b7616c..3e6d047a 100644
--- a/client/components/NetworkList.vue
+++ b/client/components/NetworkList.vue
@@ -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;
diff --git a/client/css/style.css b/client/css/style.css
index b430d777..b5be3e22 100644
--- a/client/css/style.css
+++ b/client/css/style.css
@@ -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 {