From ef2407832202e5451751e26459e6bdcdbd152122 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Sat, 21 May 2022 16:04:06 +0200
Subject: fix: close Ackee tooltip on button click

The tooltip was closing and reopening on click because of a conflict
between the button event and the hook useClickOutside. By checking that
the event target is not the button, the tooltip is now closing as
expected.
---
 src/components/molecules/forms/select-with-tooltip.tsx | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

(limited to 'src/components/molecules/forms/select-with-tooltip.tsx')

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}
-- 
cgit v1.2.3