summaryrefslogtreecommitdiffstats
path: root/src/components/molecules/forms/select-with-tooltip.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/molecules/forms/select-with-tooltip.tsx')
-rw-r--r--src/components/molecules/forms/select-with-tooltip.tsx11
1 files changed, 9 insertions, 2 deletions
diff --git a/src/components/molecules/forms/select-with-tooltip.tsx b/src/components/molecules/forms/select-with-tooltip.tsx
index f576a15..29e2563 100644
--- a/src/components/molecules/forms/select-with-tooltip.tsx
+++ b/src/components/molecules/forms/select-with-tooltip.tsx
@@ -29,15 +29,21 @@ const SelectWithTooltip: FC<SelectWithTooltipProps> = ({
...props
}) => {
const [isTooltipOpened, setIsTooltipOpened] = useState<boolean>(false);
+ const buttonRef = useRef<HTMLButtonElement>(null);
const tooltipRef = useRef<HTMLDivElement>(null);
const buttonModifier = isTooltipOpened ? styles['btn--activated'] : '';
const tooltipModifier = isTooltipOpened
? styles['tooltip--visible']
: styles['tooltip--hidden'];
+ const closeTooltip = (target: EventTarget) => {
+ if (buttonRef.current && !buttonRef.current.contains(target as Node))
+ setIsTooltipOpened(false);
+ };
+
useClickOutside(
tooltipRef,
- () => isTooltipOpened && setIsTooltipOpened(false)
+ (target) => isTooltipOpened && closeTooltip(target)
);
return (
@@ -49,8 +55,9 @@ const SelectWithTooltip: FC<SelectWithTooltipProps> = ({
{...props}
/>
<HelpButton
- onClick={() => setIsTooltipOpened(!isTooltipOpened)}
className={`${styles.btn} ${buttonModifier}`}
+ onClick={() => setIsTooltipOpened(!isTooltipOpened)}
+ ref={buttonRef}
/>
<Tooltip
title={title}