From 2ee53670c894cfd5e5a87866fc3ade8d4aba4bb8 Mon Sep 17 00:00:00 2001
From: Quincy Morgan <2046746+quincylvania@users.noreply.github.com>
Date: Tue, 27 Oct 2020 16:01:00 -0400
Subject: [PATCH] Fix issue with mobile Safari showing the native selection
 menu when long-pressing on the map

---
 css/80_app.css     | 7 +++++++
 modules/ui/init.js | 9 +++++++++
 2 files changed, 16 insertions(+)

diff --git a/css/80_app.css b/css/80_app.css
index 2fde1c520..95b109765 100644
--- a/css/80_app.css
+++ b/css/80_app.css
@@ -2876,6 +2876,12 @@ img.tag-reference-wiki-image {
 .over-map > * {
     pointer-events: auto;
 }
+/* offscreen this without hiding it */
+.over-map .select-trap {
+    position: absolute;
+    right: -1000%;
+    opacity: 0;
+}
 
 /* Map Controls
 ------------------------------------------------------- */
@@ -4064,6 +4070,7 @@ img.tile-debug {
     background: #000;
     user-select: none;
     touch-action: none;
+    -webkit-touch-callout: none;
 }
 .main-map * {
     touch-action: none;
diff --git a/modules/ui/init.js b/modules/ui/init.js
index 92defe275..2242d98a8 100644
--- a/modules/ui/init.js
+++ b/modules/ui/init.js
@@ -163,6 +163,15 @@ export function uiInit(context) {
             .append('div')
             .attr('class', 'over-map');
 
+        // HACK: Mobile Safari 14 likes to select anything selectable when long-
+        // pressing, even if it's not targeted. This conflicts with long-pressing
+        // to show the edit menu. We add a selectable offscreen element as the first
+        // child to trick Safari into not showing the selection UI.  
+        overMap
+            .append('div')
+            .attr('class', 'select-trap')
+            .text('t');
+
         overMap
             .append('div')
             .attr('class', 'spinner')