From c479d82afadba362e4f9b89e9dafef961b17295b Mon Sep 17 00:00:00 2001
From: Juhani Koivulainen <juhani.koivulainen@elenium.fi>
Date: Thu, 5 Dec 2024 14:22:08 +0200
Subject: [PATCH] OPHJOD-1110: Close tool filters menu on outside click

---
 src/routes/Tool/Tool.tsx | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/routes/Tool/Tool.tsx b/src/routes/Tool/Tool.tsx
index 6f246fe2..b533c9b2 100644
--- a/src/routes/Tool/Tool.tsx
+++ b/src/routes/Tool/Tool.tsx
@@ -1,5 +1,6 @@
 import { OpportunityCard, Title } from '@/components';
 import { useEnvironment } from '@/hooks/useEnvironment';
+import { useMenuClickHandler } from '@/hooks/useMenuClickHandler';
 import { OpportunitiesFilter } from '@/routes/Tool';
 import { MahdollisuusTyyppi } from '@/routes/types';
 import { useToolStore } from '@/stores/useToolStore';
@@ -261,6 +262,9 @@ const YourOpportunities = () => {
   const scrollRef = React.useRef<HTMLUListElement>(null);
   const { isLoggedIn } = useLoaderData() as ToolLoaderData;
   const [filtersOpen, setFiltersOpen] = React.useState(false);
+  const filterMenuButtonRef = React.useRef<HTMLButtonElement>(null);
+  const filterMenuRef = useMenuClickHandler(() => setFiltersOpen(false), filterMenuButtonRef);
+
   const ehdotuksetCount = toolStore.ehdotuksetCount ?? {};
   const filter = toolStore.filter;
   const count =
@@ -282,12 +286,17 @@ const YourOpportunities = () => {
           </span>
           <button
             className="text-form-label flex flex-row items-center gap-5"
+            ref={filterMenuButtonRef}
             onClick={() => setFiltersOpen(!filtersOpen)}
           >
             <span className="font-arial">{t('do-filter')}</span>
             <span className="flex bg-white rounded-full relative size-7 justify-center items-center">
               <MdOutlineTune size={20} />
-              {filtersOpen && <OpportunitiesFilter />}
+              {filtersOpen && (
+                <div ref={filterMenuRef}>
+                  <OpportunitiesFilter />
+                </div>
+              )}
             </span>
           </button>
         </div>