From 8675f1d43ed315699b11524b646ff8757761cf0d Mon Sep 17 00:00:00 2001 From: Lucaci-Andrei Date: Thu, 9 Jan 2025 09:54:59 +0100 Subject: [PATCH 1/5] fix: add handling for clicks outside of MapsIndoors data in the Categories component --- .../Search/Categories/Categories.jsx | 22 ++++++++++++++++++- .../src/components/Search/Search.jsx | 1 + 2 files changed, 22 insertions(+), 1 deletion(-) diff --git a/packages/map-template/src/components/Search/Categories/Categories.jsx b/packages/map-template/src/components/Search/Categories/Categories.jsx index 0d7b7617c..4a3d62c4d 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 - Whether 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,20 @@ function Categories({ onSetSize, getFilteredLocations, searchFieldRef }) { }); } + useEffect(() => { + if (clickedOutsideMapsIndoorsData && selectedCategory) { + setSelectedCategory(null); + setSearchResults([]); + setFilteredLocations([]); + setSize(snapPoints.FIT); + + // If search field has value, trigger search without category filter + if (searchFieldRef.current?.getValue()) { + searchFieldRef.current.triggerSearch(); + } + } + }, [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} />} From 29930263245acba662596e53fa3ea59f4b2c4adf Mon Sep 17 00:00:00 2001 From: Lucaci-Andrei Date: Thu, 9 Jan 2025 14:00:54 +0100 Subject: [PATCH 2/5] refactor: Fix JSDoc description Co-authored-by: Andreea Ceachir <113503166+andreeaceachir142@users.noreply.github.com> --- .../src/components/Search/Categories/Categories.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/map-template/src/components/Search/Categories/Categories.jsx b/packages/map-template/src/components/Search/Categories/Categories.jsx index 4a3d62c4d..7a9f388ea 100644 --- a/packages/map-template/src/components/Search/Categories/Categories.jsx +++ b/packages/map-template/src/components/Search/Categories/Categories.jsx @@ -24,7 +24,7 @@ import mapsIndoorsInstanceState from "../../../atoms/mapsIndoorsInstanceState"; * @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 - Whether the Categories window is open or not + * @param {boolean} props.isOpen - Determines wheteher the Categories window is open or not. */ function Categories({ onSetSize, getFilteredLocations, searchFieldRef, isOpen }) { /** Referencing the categories results container DOM element */ From ffb77e70b63d1cd65bb65c35e368b0116b41b711 Mon Sep 17 00:00:00 2001 From: Lucaci-Andrei Date: Thu, 9 Jan 2025 14:20:54 +0100 Subject: [PATCH 3/5] bugfix: add comments to cleanup useEffect in the Categories component and call clear function if searchField has any text. --- .../components/Search/Categories/Categories.jsx | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/packages/map-template/src/components/Search/Categories/Categories.jsx b/packages/map-template/src/components/Search/Categories/Categories.jsx index 7a9f388ea..962ab53da 100644 --- a/packages/map-template/src/components/Search/Categories/Categories.jsx +++ b/packages/map-template/src/components/Search/Categories/Categories.jsx @@ -130,6 +130,17 @@ function Categories({ onSetSize, getFilteredLocations, searchFieldRef, isOpen }) }); } + /** + * 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); @@ -137,9 +148,9 @@ function Categories({ onSetSize, getFilteredLocations, searchFieldRef, isOpen }) setFilteredLocations([]); setSize(snapPoints.FIT); - // If search field has value, trigger search without category filter + // If search field has a value, clear the search field. if (searchFieldRef.current?.getValue()) { - searchFieldRef.current.triggerSearch(); + searchFieldRef.current.clear(); } } }, [clickedOutsideMapsIndoorsData]); From a246f074dabc1ce5f2598863a1ac6dac6678cc6b Mon Sep 17 00:00:00 2001 From: Lucaci-Andrei Date: Wed, 15 Jan 2025 10:19:39 +0100 Subject: [PATCH 4/5] chore: Update Changelog --- packages/map-template/CHANGELOG.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/map-template/CHANGELOG.md b/packages/map-template/CHANGELOG.md index 1e299de20..202dd83fa 100644 --- a/packages/map-template/CHANGELOG.md +++ b/packages/map-template/CHANGELOG.md @@ -5,6 +5,10 @@ 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 issue of clicking outside of MapsIndoors data to close the Categories tab + ## [1.65.2] - 2025-01-13 ## Fixed From 2277c0d58bce763a7eb8daebfb98d131e871c2c7 Mon Sep 17 00:00:00 2001 From: Lucaci-Andrei Date: Wed, 15 Jan 2025 10:21:59 +0100 Subject: [PATCH 5/5] chore: Update CHANGELOG for version 1.65.3 --- packages/map-template/CHANGELOG.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/map-template/CHANGELOG.md b/packages/map-template/CHANGELOG.md index 202dd83fa..857dc7bc2 100644 --- a/packages/map-template/CHANGELOG.md +++ b/packages/map-template/CHANGELOG.md @@ -7,6 +7,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ## [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