Click on non MapsIndoors data to exit categories if active.

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.65.3] - 2025-01-15
+
+## Fixed
+
+- Fixed issue of clicking outside of MapsIndoors data to close the Categories tab
+
 ## [1.65.2] - 2025-01-13
 
 ## Fixed

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

@@ -14,6 +14,8 @@ import { useIsDesktop } from "../../../hooks/useIsDesktop";
 import getActiveCategory from "../../../helpers/GetActiveCategory";
 import isBottomSheetLoadedState from "../../../atoms/isBottomSheetLoadedState";
 import categoryState from "../../../atoms/categoryState";
+import useOutsideMapsIndoorsDataClick from "../../../hooks/useOutsideMapsIndoorsDataClick";
+import mapsIndoorsInstanceState from "../../../atoms/mapsIndoorsInstanceState";
 
 /**
  * Show the categories list.
@@ -22,8 +24,9 @@ import categoryState from "../../../atoms/categoryState";
  * @param {function} props.onSetSize - Callback that is fired when the categories are clicked.
  * @param {function} props.getFilteredLocations - Function that gets the filtered locations based on the category selected.
  * @param {object} props.searchFieldRef - The reference to the search input field.
+ * @param {boolean} props.isOpen - Determines wheteher the Categories window is open or not.
  */
-function Categories({ onSetSize, getFilteredLocations, searchFieldRef }) {
+function Categories({ onSetSize, getFilteredLocations, searchFieldRef, isOpen }) {
     /** Referencing the categories results container DOM element */
     const categoriesListRef = useRef();
 
@@ -50,6 +53,9 @@ function Categories({ onSetSize, getFilteredLocations, searchFieldRef }) {
     const isBottomSheetLoaded = useRecoilValue(isBottomSheetLoadedState);
     const category = useRecoilValue(categoryState);
 
+    const mapsIndoorsInstance = useRecoilValue(mapsIndoorsInstanceState);
+    const clickedOutsideMapsIndoorsData = useOutsideMapsIndoorsDataClick(mapsIndoorsInstance, isOpen);
+
     /**
      * Communicate size change to parent component.
      *
@@ -124,6 +130,31 @@ function Categories({ onSetSize, getFilteredLocations, searchFieldRef }) {
         });
     }
 
+    /**
+     * Handles cleanup when user clicks outside MapsIndoors data area.
+     * This effect will:
+     * 1. Clear the currently selected category
+     * 2. Reset all search/filter related states to empty
+     * 3. Collapse the view back to fit size
+     * 4. Clear any existing search input
+     * 
+     * Only triggers when:
+     * - There is a currently selected category and user clicks outside MapsIndoors data
+     */
+    useEffect(() => {
+        if (clickedOutsideMapsIndoorsData && selectedCategory) {
+            setSelectedCategory(null);
+            setSearchResults([]);
+            setFilteredLocations([]);
+            setSize(snapPoints.FIT);
+
+            // If search field has a value, clear the search field.
+            if (searchFieldRef.current?.getValue()) {
+                searchFieldRef.current.clear();
+            }
+        }
+    }, [clickedOutsideMapsIndoorsData]);
+
     /**
      * Add event listener for scrolling in the categories list
      */

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

@@ -416,6 +416,7 @@ function Search({ onSetSize, isOpen }) {
             {categories.length > 0 && <Categories onSetSize={onSetSize}
                 searchFieldRef={searchFieldRef}
                 getFilteredLocations={category => getFilteredLocations(category)}
+                isOpen={!!selectedCategory}
             />}