chore: close toolbar modals on click/focus outside

1 files changed, 9 insertions, 1 deletions

diff --git a/src/components/molecules/forms/select-with-tooltip.tsx b/src/components/molecules/forms/select-with-tooltip.tsx
index cf7b041..f576a15 100644
--- a/src/components/molecules/forms/select-with-tooltip.tsx
+++ b/src/components/molecules/forms/select-with-tooltip.tsx
@@ -1,4 +1,5 @@
-import { FC, useState } from 'react';
+import useClickOutside from '@utils/hooks/use-click-outside';
+import { FC, useRef, useState } from 'react';
 import HelpButton from '../buttons/help-button';
 import Tooltip, { type TooltipProps } from '../modals/tooltip';
 import LabelledSelect, { type LabelledSelectProps } from './labelled-select';
@@ -28,11 +29,17 @@ const SelectWithTooltip: FC<SelectWithTooltipProps> = ({
   ...props
 }) => {
   const [isTooltipOpened, setIsTooltipOpened] = useState<boolean>(false);
+  const tooltipRef = useRef<HTMLDivElement>(null);
   const buttonModifier = isTooltipOpened ? styles['btn--activated'] : '';
   const tooltipModifier = isTooltipOpened
     ? styles['tooltip--visible']
     : styles['tooltip--hidden'];
 
+  useClickOutside(
+    tooltipRef,
+    () => isTooltipOpened && setIsTooltipOpened(false)
+  );
+
   return (
     <div className={styles.wrapper}>
       <LabelledSelect
@@ -50,6 +57,7 @@ const SelectWithTooltip: FC<SelectWithTooltipProps> = ({
         content={content}
         icon="?"
         className={`${styles.tooltip} ${tooltipModifier} ${tooltipClassName}`}
+        ref={tooltipRef}
       />
     </div>
   );