From 58cb40f031f395ca9efccff674ba0f2dae723f50 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Wed, 8 Jun 2022 12:07:08 +0200
Subject: fix(settings): close tooltip when modal is closing

The event was not captured so the tooltip remained open when the
settings was closed. It prevented to click on the toolbar buttons.
---
 src/components/molecules/forms/fieldset.tsx | 25 +++++++++++++------------
 1 file changed, 13 insertions(+), 12 deletions(-)

(limited to 'src/components/molecules/forms/fieldset.tsx')

diff --git a/src/components/molecules/forms/fieldset.tsx b/src/components/molecules/forms/fieldset.tsx
index 670cfa1..dae3ead 100644
--- a/src/components/molecules/forms/fieldset.tsx
+++ b/src/components/molecules/forms/fieldset.tsx
@@ -1,4 +1,4 @@
-import useClickOutside from '@utils/hooks/use-click-outside';
+import useOnClickOutside from '@utils/hooks/use-on-click-outside';
 import {
   cloneElement,
   FC,
@@ -33,11 +33,15 @@ export type FieldsetProps = {
    */
   legendClassName?: string;
   /**
-   * The legend position. Default: stacked.
+   * The legend position.
+   *
+   * @default 'stacked'
    */
   legendPosition?: 'inline' | 'stacked';
   /**
-   * An accessible role. Default: group.
+   * An accessible role.
+   *
+   * @default 'group'
    */
   role?: 'group' | 'radiogroup' | 'presentation' | 'none';
   /**
@@ -63,7 +67,6 @@ const Fieldset: FC<FieldsetProps> = ({
 }) => {
   const [isTooltipOpened, setIsTooltipOpened] = useState<boolean>(false);
   const buttonRef = useRef<HTMLButtonElement>(null);
-  const tooltipRef = useRef<HTMLDivElement>(null);
   const wrapperModifier = `wrapper--${legendPosition}`;
   const buttonModifier = isTooltipOpened ? styles['btn--activated'] : '';
   const legendModifier =
@@ -73,19 +76,17 @@ const Fieldset: FC<FieldsetProps> = ({
     : 'tooltip--hidden';
 
   /**
-   * Close the tooltip if the event target is outside.
+   * Close the tooltip if the target is not the button.
    *
-   * @param {EventTarget} target - The event target.
+   * @param {Node} target - The event target.
    */
-  const closeTooltip = (target: EventTarget) => {
-    if (buttonRef.current && !buttonRef.current.contains(target as Node))
+  const closeTooltip = (target: Node) => {
+    if (buttonRef.current && !buttonRef.current.contains(target)) {
       setIsTooltipOpened(false);
+    }
   };
 
-  useClickOutside(
-    tooltipRef,
-    (target) => isTooltipOpened && closeTooltip(target)
-  );
+  const tooltipRef = useOnClickOutside<HTMLDivElement>(closeTooltip);
 
   return (
     <fieldset
-- 
cgit v1.2.3