From 35566039d534811666fbda206c0e726911005842 Mon Sep 17 00:00:00 2001
From: martylukyy <35452459+martylukyy@users.noreply.github.com>
Date: Tue, 27 Feb 2024 12:24:17 +0100
Subject: [PATCH] fix(web): make tooltips clickable if touchscreen is present
 (#1427)

* fix(web): make tooltips clickable if touchscreen is present

* fix(web): handle visibility for click and touch

* fix(chore): add removed license header again
---
 web/src/components/tooltips/Tooltip.tsx | 33 +++++++++++--------------
 1 file changed, 15 insertions(+), 18 deletions(-)

diff --git a/web/src/components/tooltips/Tooltip.tsx b/web/src/components/tooltips/Tooltip.tsx
index 1c1bfcc..3cc270e 100644
--- a/web/src/components/tooltips/Tooltip.tsx
+++ b/web/src/components/tooltips/Tooltip.tsx
@@ -14,7 +14,6 @@ import { classNames } from "@utils";
 
 interface TooltipProps {
   label: ReactNode;
-  onLabelClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
   title?: ReactNode;
   maxWidth?: string;
   requiresClick?: boolean;
@@ -27,7 +26,6 @@ interface TooltipProps {
 
 export const Tooltip = ({
   label,
-  onLabelClick,
   title,
   children,
   requiresClick,
@@ -36,9 +34,6 @@ export const Tooltip = ({
   const [isTooltipVisible, setIsTooltipVisible] = useState(false);
   const [tooltipNode, setTooltipNode] = useState<HTMLDivElement | null>(null);
   const [triggerNode, setTriggerNode] = useState<HTMLDivElement | null>(null);
-  const isTouchDevice = () => {
-    return 'ontouchstart' in window || navigator.maxTouchPoints > 0;
-  };
 
   // default tooltip placement to right
   const [placement, setPlacement] = useState<Placement>('right');
@@ -62,19 +57,23 @@ export const Tooltip = ({
     };
   }, []);
 
-
   const {
     getTooltipProps,
     setTooltipRef: popperSetTooltipRef,
     setTriggerRef: popperSetTriggerRef,
     visible
   } = usePopperTooltip({
-    trigger: isTouchDevice() ? [] : (requiresClick ? 'click' : ['click', 'hover']),
+    trigger: requiresClick ? 'click' : ['click', 'hover'],
     interactive: true,
     delayHide: 200,
     placement,
   });
 
+  const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    setIsTooltipVisible(!isTooltipVisible);
+  };
+
   const handleTouch = (e: React.TouchEvent<HTMLDivElement>) => {
     e.preventDefault();
     setIsTooltipVisible(!isTooltipVisible);
@@ -90,35 +89,33 @@ export const Tooltip = ({
     setTriggerNode(node);
   };
 
-  const handleClickOutside = useCallback((event: TouchEvent) => {
+  const handleClickOutside = useCallback((event: MouseEvent | TouchEvent) => {
     if (tooltipNode && !tooltipNode.contains(event.target as Node) && triggerNode && !triggerNode.contains(event.target as Node)) {
       setIsTooltipVisible(false);
     }
   }, [tooltipNode, triggerNode]);
 
   useEffect(() => {
-    document.addEventListener('touchstart', handleClickOutside, true);
+    document.addEventListener('touchstart', handleClickOutside as EventListener, true);
+    document.addEventListener('mousedown', handleClickOutside as EventListener, true);
     return () => {
-      document.removeEventListener('touchstart', handleClickOutside, true);
+      document.removeEventListener('touchstart', handleClickOutside as EventListener, true);
+      document.removeEventListener('mousedown', handleClickOutside as EventListener, true);
     };
-  }, [handleClickOutside, tooltipNode, triggerNode]);
+  }, [handleClickOutside]);
 
   return (
     <>
       <div
         ref={setTriggerRef}
         className="truncate"
-        onClick={(e) => {
-          if (!isTouchDevice() && !visible) {
-            onLabelClick?.(e);
-          }
-        }}
-        onTouchStart={isTouchDevice() ? handleTouch : undefined}
+        onClick={handleClick}
+        onTouchStart={handleTouch}
       >
         {label}
       </div>
       <Transition
-        show={isTouchDevice() ? isTooltipVisible : visible}
+        show={isTooltipVisible || visible}
         className="z-10"
         enter="transition duration-200 ease-out"
         enterFrom="opacity-0"