From 3183b8be2ba453d00891bf93902e766fa1f57410 Mon Sep 17 00:00:00 2001
From: alter-eggo <anastas3993@gmail.com>
Date: Sat, 10 Feb 2024 15:02:34 +0400
Subject: [PATCH] fix: close settings dropdown on click

---
 src/app/common/hooks/use-onclickoutside.ts       | 16 ++++++++++++++--
 src/app/components/header.tsx                    |  1 +
 .../settings-dropdown/settings-dropdown.tsx      |  2 +-
 3 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/app/common/hooks/use-onclickoutside.ts b/src/app/common/hooks/use-onclickoutside.ts
index c7ceea84bb6..c6b1bf5b8fb 100644
--- a/src/app/common/hooks/use-onclickoutside.ts
+++ b/src/app/common/hooks/use-onclickoutside.ts
@@ -27,7 +27,11 @@ const getOptions = (event: HandledEventsType) => {
   return;
 };
 
-export function useOnClickOutside(ref: RefObject<HTMLElement>, handler: Handler | null) {
+export function useOnClickOutside(
+  ref: RefObject<HTMLElement>,
+  handler: Handler | null,
+  exceptionIds: string[] = []
+) {
   const noHandler = !handler;
   const handlerRef = useLatest(handler);
 
@@ -41,6 +45,14 @@ export function useOnClickOutside(ref: RefObject<HTMLElement>, handler: Handler
         return;
       }
 
+      const clickedElementIsAnException = exceptionIds
+        .map(el => document.getElementById(el))
+        .some(el => el?.contains(event.target as Node));
+
+      if (clickedElementIsAnException) {
+        return;
+      }
+
       handlerRef.current(event);
     };
 
@@ -53,5 +65,5 @@ export function useOnClickOutside(ref: RefObject<HTMLElement>, handler: Handler
         document.removeEventListener(event, listener, getOptions(event) as EventListenerOptions);
       });
     };
-  }, [ref, handlerRef, noHandler]);
+  }, [ref, handlerRef, noHandler, exceptionIds]);
 }
diff --git a/src/app/components/header.tsx b/src/app/components/header.tsx
index 4ab3668797e..3aab67a19bb 100644
--- a/src/app/components/header.tsx
+++ b/src/app/components/header.tsx
@@ -71,6 +71,7 @@ export function Header(props: HeaderProps) {
         <NetworkModeBadge />
         {!hideActions && (
           <Button
+            id="settings-menu-btn"
             data-testid={SettingsSelectors.SettingsMenuBtn}
             onClick={() => setIsShowingSettings(!isShowingSettings)}
             variant="ghost"
diff --git a/src/app/features/settings-dropdown/settings-dropdown.tsx b/src/app/features/settings-dropdown/settings-dropdown.tsx
index 5e298fe6152..e41406d8b7f 100644
--- a/src/app/features/settings-dropdown/settings-dropdown.tsx
+++ b/src/app/features/settings-dropdown/settings-dropdown.tsx
@@ -55,7 +55,7 @@ export function SettingsDropdown() {
 
   const isLedger = useHasLedgerKeys();
 
-  useOnClickOutside(ref, isShowingSettings ? handleClose : null);
+  useOnClickOutside(ref, isShowingSettings ? handleClose : null, ['settings-menu-btn']);
 
   // RouteUrls.Activity is nested off / so we need to use a link relative to the route
   const linkRelativeType =