api selector hide on outside click

This commit is contained in:
Jing Hua 2023-04-29 23:09:29 +08:00
parent b419255beb
commit b7b3c0ec75

View file

@ -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`}