Fix tooltip showing when panning/zooming on touch device

src/api/event.ts

@@ -944,6 +944,21 @@ export class EventAPI extends APIScope {
                     throttle(50, (mapMove: MapMove) => zeHandler(mapMove)),
                     handlerName
                 );
+
+                this.$iApi.event.on(
+                    GlobalEvents.MAP_MOUSEDOWN,
+                    throttle(50, mapMove => {
+                        const downPoint = {
+                            screenX: mapMove.offsetX,
+                            screenY: mapMove.offsetY,
+                            button: mapMove.button,
+                            moveTime: 0
+                        };
+                        zeHandler(downPoint);
+                    }),
+                    handlerName + '1'
+                );
+
                 break;
 
             case DefEH.MAP_MOUSELEAVE_REMOVES_MAPTIP:

src/components/map/esri-map.vue

@@ -14,12 +14,14 @@
             duration: [200, 200]
         }"
         @mousedown="mouseFocus"
+        @touchstart="isTouch = true"
+        @touchend="isTouch = false"
         @keydown.up.down.left.right.prevent
     ></div>
 </template>
 
 <script setup lang="ts">
-import { computed, inject, onBeforeUnmount, reactive, watch } from 'vue';
+import { computed, inject, onBeforeUnmount, reactive, watch, ref } from 'vue';
 import { useMaptipStore } from '@/stores/maptip';
 import type { InstanceAPI } from '@/api';
 import type { Point } from '@/geo/api';
@@ -32,6 +34,8 @@ const maptipInstance = computed(() => maptipStore.maptipInstance);
 const maptipContent = computed(() => maptipStore.content);
 const watchers = reactive<Array<() => void>>([]);
 
+const isTouch = ref(false);
+
 watchers.push(
     watch(maptipPoint, () => {
         if (maptipPoint.value) {
@@ -42,7 +46,7 @@ watchers.push(
             const offsetX = screenPointFromMapPoint.screenX - originX;
             const offsetY = originY - screenPointFromMapPoint.screenY;
             maptipInstance.value.setProps({
-                offset: [offsetX, offsetY]
+                offset: isTouch.value ? [offsetX, offsetY + 25] : [offsetX, offsetY]
             });
             if (maptipContent.value && maptipContent.value !== '') {
                 maptipInstance.value.show();
@@ -74,4 +78,14 @@ const mouseFocus = () => {
 };
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss">
+.esri-view-surface {
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+</style>

src/fixtures/details/components/result-item.vue

@@ -16,8 +16,13 @@
                 class="pl-3 text-left flex-grow itemName"
                 :content="itemName"
                 v-html="makeHtmlLink(itemName)"
+                @touchstart="isTouch = true"
+                @touchend="isTouch = false"
                 v-truncate="{
-                    options: { placement: 'right' }
+                    options: {
+                        placement: 'top-start',
+                        offset: () => (isTouch ? [0, 25] : [0, 0])
+                    }
                 }"
                 :tabindex="inList ? -1 : 0"
             ></span>
@@ -111,6 +116,7 @@ const iApi = inject<InstanceAPI>('iApi')!;
 const watchers = ref<Array<() => void>>([]);
 const detailsStore = useDetailsStore();
 const { t } = useI18n();
+const isTouch = ref(false);
 
 /**
  * Icon string to display for this item

src/fixtures/panguard/map-panguard.vue

@@ -71,6 +71,28 @@ const setup = () => {
             })
         );
 
+        let lastX = 0,
+            lastY = 0,
+            targetX = 0,
+            targetY = 0;
+        let rafID = 0;
+
+        const smoothingFactor = 0.2;
+
+        function updateScroll() {
+            lastX += (targetX - lastX) * smoothingFactor;
+            lastY += (targetY - lastY) * smoothingFactor;
+
+            window.scrollBy({ left: lastX, top: lastY, behavior: 'instant' });
+
+            // if still moving, schedule another frame
+            if (Math.abs(targetX - lastX) > 0.5 || Math.abs(targetY - lastY) > 0.5) {
+                rafID = requestAnimationFrame(updateScroll);
+            } else {
+                rafID = 0;
+            }
+        }
+
         esriHandlers.push(
             iApi.geo.map.esriView!.on('pointer-move', e => {
                 const { pointerId, pointerType, x, y } = e;
@@ -81,6 +103,14 @@ const setup = () => {
                     return;
                 }
 
+                // set new target offsets
+                targetX = pointer.x - x;
+                targetY = pointer.y - y;
+
+                if (!rafID) {
+                    //rafID = requestAnimationFrame(updateScroll);
+                }
+
                 // ignore very small movements to avoid scrolling when someone is tapping the screen
                 const distance = Math.sqrt(Math.pow(x - pointer.x, 2) + Math.pow(y - pointer.y, 2));
                 if (distance < 20) return;
@@ -95,9 +125,6 @@ const setup = () => {
                 timeoutID.value = window.setTimeout(() => {
                     panGuard.value!.classList.remove('pg-active');
                 }, 2000);
-
-                // manually scroll the page since scrolling doesn't work when moving over the map
-                window.scrollBy(pointer.x - x, pointer.y - y);
             })
         );
     });
@@ -123,6 +150,7 @@ const setup = () => {
 
     opacity: 0;
     pointer-events: none !important;
+    touch-action: auto;
     z-index: 100;
 
     &.pg-active {

src/geo/map/maptip.ts

@@ -41,9 +41,11 @@ export class MaptipAPI extends APIScope {
 
         if (!graphicHit) {
             this.clear();
+            // If there is no graphic hit, disable the maptip. Otherwise vue-tippy will
+            // show the last maptip content for the previous graphic hit on touch devices when they pan/zoom.
+            this.maptipStore.maptipInstance.disable();
             return;
         }
-
         // Get the layer
         const layerInstance: LayerInstance | undefined = this.$iApi.geo.layer.getLayer(graphicHit.layerId);
 
@@ -62,6 +64,8 @@ export class MaptipAPI extends APIScope {
         }
 
         this.clear();
+        // If there is no graphic hit, disable the maptip. Otherwise vue-tippy will
+        // show the last maptip content for the previous graphic hit on touch devices when they pan/zoom.
         this.#lastHit = graphicHit;
 
         if (!layerInstance) {
@@ -84,6 +88,8 @@ export class MaptipAPI extends APIScope {
             getAttribs: true
         });
 
+        // At this point we have a graphic hit and a layer, so we can show the maptip
+        this.maptipStore.maptipInstance.enable();
         this.setPoint(this.$iApi.geo.map.screenPointToMapPoint(screenPoint));
 
         this.$iApi.event.emit(GlobalEvents.MAP_GRAPHICHIT, {