diff --git a/packages/map-template/CHANGELOG.md b/packages/map-template/CHANGELOG.md index 1e299de20..857dc7bc2 100644 --- a/packages/map-template/CHANGELOG.md +++ b/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 diff --git a/packages/map-template/src/components/Search/Categories/Categories.jsx b/packages/map-template/src/components/Search/Categories/Categories.jsx index 0d7b7617c..962ab53da 100644 --- a/packages/map-template/src/components/Search/Categories/Categories.jsx +++ b/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 */ diff --git a/packages/map-template/src/components/Search/Search.jsx b/packages/map-template/src/components/Search/Search.jsx index 3592d984a..7439d44b1 100644 --- a/packages/map-template/src/components/Search/Search.jsx +++ b/packages/map-template/src/components/Search/Search.jsx @@ -416,6 +416,7 @@ function Search({ onSetSize, isOpen }) { {categories.length > 0 && getFilteredLocations(category)} + isOpen={!!selectedCategory} />}