Feat/matb/fix select highlight

packages/map-template/CHANGELOG.md

@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.96.16] - Unreleased
+
+### Fixed
+
+- States when location is both highlighted and selected.
+
 ## [1.96.15] - 2026-03-24
 
 ### Fixed

packages/map-template/src/components/MapTemplate/MapTemplate.jsx

@@ -236,9 +236,9 @@ function MapTemplate({ apiKey, gmApiKey, mapboxAccessToken, venue, locationId, p
             const miSdkApiTag = document.createElement('script');
             miSdkApiTag.setAttribute('type', 'text/javascript');
             // Remember to update the root index.html with the same version / integrity
-            miSdkApiTag.setAttribute('src', 'https://app.mapsindoors.com/mapsindoors/js/sdk/4.55.0/mapsindoors-4.55.0.js.gz');
-            miSdkApiTag.setAttribute('integrity', 'sha384-oW7TEiuEViUPGMgbrtXn96vWoBrrtrT+tYYCaVNll6KZTr8GWS5dqjV0sdJOcyhk');
-            miSdkApiTag.setAttribute('crossorigin', 'anonymous');
+            miSdkApiTag.setAttribute('src', 'http://localhost:3001/build/index.js');
+            // miSdkApiTag.setAttribute('integrity', 'sha384-oW7TEiuEViUPGMgbrtXn96vWoBrrtrT+tYYCaVNll6KZTr8GWS5dqjV0sdJOcyhk');
+            // miSdkApiTag.setAttribute('crossorigin', 'anonymous');
             document.body.appendChild(miSdkApiTag);
             miSdkApiTag.onload = () => {
                 resolve();
@@ -587,6 +587,7 @@ function MapTemplate({ apiKey, gmApiKey, mapboxAccessToken, venue, locationId, p
 
         if (currentLocation && currentLocation.id !== kioskOriginLocationId) {
             if (mapsIndoorsInstance?.selectLocation) {
+                mapsIndoorsInstance.highlight?.([]);
                 mapsIndoorsInstance.selectLocation(currentLocation);
             }
         } else {

packages/map-template/src/components/MapWrapper/MapWrapper.jsx

@@ -12,6 +12,7 @@ import gmApiKeyState from '../../atoms/gmApiKeyState';
 import mapboxAccessTokenState from '../../atoms/mapboxAccessTokenState';
 import filteredLocationsState from '../../atoms/filteredLocationsState';
 import filteredLocationsByExternalIDState from '../../atoms/filteredLocationsByExternalIDState';
+import currentLocationState from '../../atoms/currentLocationState';
 import tileStyleState from '../../atoms/tileStyleState';
 import positionControlState from '../../atoms/positionControlState';
 import bearingState from '../../atoms/bearingState';
@@ -78,6 +79,7 @@ function MapWrapper({ onLocationClick, onMapPositionKnown, useMapProviderModule,
     const setDirectionsService = useSetRecoilState(directionsServiceState);
     const filteredLocations = useRecoilValue(filteredLocationsState);
     const filteredLocationsByExternalIDs = useRecoilValue(filteredLocationsByExternalIDState);
+    const currentLocation = useRecoilValue(currentLocationState);
     const tileStyle = useRecoilValue(tileStyleState);
     const bearing = useRecoilValue(bearingState);
     const pitch = useRecoilValue(pitchState);
@@ -175,17 +177,23 @@ function MapWrapper({ onLocationClick, onMapPositionKnown, useMapProviderModule,
      * Dynamically filter or highlight location based on the "filteredLocations", "filteredLocationsByExternalIDs" and "hideNonMatches" property.
      */
     useEffect(() => {
+        if (!mapsIndoorsInstance) return;
+
         const locations = filteredLocations || filteredLocationsByExternalIDs;
-        if (!locations || locations.length === 0 || !mapsIndoorsInstance) return;
+
+        if (currentLocation || !locations || locations.length === 0) {
+            mapsIndoorsInstance.highlight?.([]);
+            return;
+        }
+
         const locationIds = locations.map(location => location.id);
 
-        // Check if the hideNonMatches prop or highlight method in the SDK exists
         if (hideNonMatches || !mapsIndoorsInstance.highlight) {
             mapsIndoorsInstance.filter(locationIds);
         } else {
             mapsIndoorsInstance.highlight(locationIds);
         }
-    }, [filteredLocations, filteredLocationsByExternalIDs, mapsIndoorsInstance, hideNonMatches]);
+    }, [filteredLocations, filteredLocationsByExternalIDs, mapsIndoorsInstance, hideNonMatches, currentLocation]);
 
     /*
      * React to changes in bearing and pitch props and set them on the map if mapsIndoorsInstance exists.

packages/map-template/src/components/Search/Search.jsx

@@ -372,8 +372,6 @@ function Search({ onSetSize, isOpen, onOpenChat }) {
      * @param {object} location
      */
     function onLocationClicked(location) {
-        setCurrentLocation(location);
-
         // Set the current venue to be the selected location venue.
         if (location.properties.venueId.toLowerCase() !== currentVenueName.toLowerCase()) {
             setCurrentVenueName(location.properties.venueId);
@@ -388,6 +386,10 @@ function Search({ onSetSize, isOpen, onOpenChat }) {
             mapsIndoorsInstance.setFloor(locationFloor);
         }
 
+        setTimeout(() => {
+            setCurrentLocation(location);
+        }, 500);
+
         Promise.all([getBottomPadding(), getLeftPadding()]).then(([bottomPadding, leftPadding]) => {
             mapsIndoorsInstance.goTo(location, {
                 maxZoom: 22,

packages/map-template/src/components/WebComponentWrappers/ListItemLocation/ListItemLocation.jsx

@@ -34,7 +34,10 @@ function ListItemLocation({ location, locationClicked, icon, isHovered, disableH
     const showExternalIDs = useRecoilValue(showExternalIDsState);
 
     useEffect(() => {
-        const clickHandler = customEvent => locationClicked(customEvent.detail);
+        const clickHandler = customEvent => {
+            mapsIndoorsInstance.unhoverLocation();
+            locationClicked(customEvent.detail);
+        };
         const hoverHandler = debounce(() => {
             // Skip hover functionality if disabled (e.g., during routing to prevent dual pins)
             if (disableHover) return;
@@ -43,7 +46,7 @@ function ListItemLocation({ location, locationClicked, icon, isHovered, disableH
             if (location.properties.locationSettings?.selectable !== false) {
                 mapsIndoorsInstance.hoverLocation(location);
             }
-        }, 150);
+        });
         const unhoverHandler = debounce(() => {
             // Skip unhover functionality if disabled
             if (disableHover) return;
@@ -52,7 +55,7 @@ function ListItemLocation({ location, locationClicked, icon, isHovered, disableH
             if (location.properties.locationSettings?.selectable !== false) {
                 mapsIndoorsInstance.unhoverLocation(location);
             }
-        }, 150);
+        });
 
         // Add a "non-selectable" class to the non-selectable locations.
         if (location.properties.locationSettings?.selectable === false) {