From 82eca6ee1ad6f237096bfa425f4023a93a29dcbb Mon Sep 17 00:00:00 2001
From: taDuc <tranduc.wsp@gmail.com>
Date: Wed, 10 Jun 2026 13:00:01 +0700
Subject: [PATCH] fix: disable map hover popups on mobile devices and when
 globally disabled

---
 src/uhm/components/map/useMapHoverPopup.ts     | 8 ++++++--
 src/uhm/components/preview/PreviewMapShell.tsx | 2 +-
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/uhm/components/map/useMapHoverPopup.ts b/src/uhm/components/map/useMapHoverPopup.ts
index d619a5c..20e3975 100644
--- a/src/uhm/components/map/useMapHoverPopup.ts
+++ b/src/uhm/components/map/useMapHoverPopup.ts
@@ -42,7 +42,11 @@ export function useMapHoverPopup({
 
     useEffect(() => {
         const map = mapRef.current;
-        if (!map) return;
+        if (!map || !enabled) return;
+
+        // Disable hover popup if the device has no hover capability (mobile/tablet)
+        const hasHoverSupport = window.matchMedia("(hover: hover)").matches;
+        if (!hasHoverSupport) return;
 
         const popup = new maplibregl.Popup({
             closeButton: false,
@@ -312,7 +316,7 @@ export function useMapHoverPopup({
             window.removeEventListener("keyup", onKeyUp, { capture: true });
             popup.remove();
         };
-    }, [getContentRef, mapRef, onHoverFeatureChangeRef, renderDraftRef]);
+    }, [enabled, getContentRef, mapRef, onHoverFeatureChangeRef, renderDraftRef]);
 }
 
 function getHoverLayerIds(map: maplibregl.Map): string[] {
diff --git a/src/uhm/components/preview/PreviewMapShell.tsx b/src/uhm/components/preview/PreviewMapShell.tsx
index 22ad7a3..7171c6e 100644
--- a/src/uhm/components/preview/PreviewMapShell.tsx
+++ b/src/uhm/components/preview/PreviewMapShell.tsx
@@ -173,7 +173,7 @@ export default function PreviewMapShell({
                     applyGeometryBindingFilter
                     isPreviewMode
                     onFeatureClick={onFeatureClick}
-                    hoverPopupEnabled={hoverPopupEnabled}
+                    hoverPopupEnabled={hoverPopupEnabled && !isMobileOrTablet}
                     getHoverPopupContent={getHoverPopupContent}
                     onHoverFeatureChange={onHoverFeatureChange}
                     onPlayPreviewReplay={onPlayPreviewReplay}