From b7b3c0ec75728812a8ff86baccb3d916b49450ad Mon Sep 17 00:00:00 2001
From: Jing Hua <tohjinghua123@gmail.com>
Date: Sat, 29 Apr 2023 23:09:29 +0800
Subject: [PATCH] api selector hide on outside click

---
 src/components/ApiMenu/ApiMenu.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/ApiMenu/ApiMenu.tsx b/src/components/ApiMenu/ApiMenu.tsx
index 0f7d1c8..12a3b5d 100644
--- a/src/components/ApiMenu/ApiMenu.tsx
+++ b/src/components/ApiMenu/ApiMenu.tsx
@@ -2,8 +2,12 @@ import React, { useEffect, useState } from 'react';
 import { useTranslation, Trans } from 'react-i18next';
 import useStore from '@store/store';
 
+import useHideOnOutsideClick from '@hooks/useHideOnOutsideClick';
+
 import PopupModal from '@components/PopupModal';
+
 import { availableEndpoints, defaultAPIEndpoint } from '@constants/auth';
+
 import DownChevronArrow from '@icon/DownChevronArrow';
 
 const ApiMenu = ({
@@ -121,7 +125,7 @@ const ApiEndpointSelector = ({
   _apiEndpoint: string;
   _setApiEndpoint: React.Dispatch<React.SetStateAction<string>>;
 }) => {
-  const [dropDown, setDropDown] = useState<boolean>(false);
+  const [dropDown, setDropDown, dropDownRef] = useHideOnOutsideClick();
 
   return (
     <div className='w-[40vw] relative flex-1'>
@@ -135,6 +139,7 @@ const ApiEndpointSelector = ({
       </button>
       <div
         id='dropdown'
+        ref={dropDownRef}
         className={`${
           dropDown ? '' : 'hidden'
         } absolute top-100 bottom-100 z-10 bg-white rounded-lg shadow-xl border-b border-black/10 dark:border-gray-900/50 text-gray-800 dark:text-gray-100 group dark:bg-gray-800 opacity-90 w-32 w-full`}