fix: close settings dropdown on click

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]);
 }

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"

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 =