diff options
Diffstat (limited to 'src/components/molecules/forms/select-with-tooltip.tsx')
| -rw-r--r-- | src/components/molecules/forms/select-with-tooltip.tsx | 11 |
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} |
