From 4e82634f00f095245045d7844b04e60cb4b3bd61 Mon Sep 17 00:00:00 2001
From: FinalDoom <677609+FinalDoom@users.noreply.github.com>
Date: Wed, 20 Dec 2023 18:08:13 -0700
Subject: [PATCH] Make tooltip display more reactive

---
 .../components/sidebar/SidebarFilter.tsx      | 31 +++++++++++--------
 1 file changed, 18 insertions(+), 13 deletions(-)

diff --git a/client/src/javascript/components/sidebar/SidebarFilter.tsx b/client/src/javascript/components/sidebar/SidebarFilter.tsx
index 370e74274..4afc6ad07 100644
--- a/client/src/javascript/components/sidebar/SidebarFilter.tsx
+++ b/client/src/javascript/components/sidebar/SidebarFilter.tsx
@@ -1,11 +1,24 @@
 import classnames from 'classnames';
-import {FC, ReactNode, KeyboardEvent, MouseEvent, TouchEvent, useState} from 'react';
+import {createRef, FC, ReactNode, KeyboardEvent, MouseEvent, RefObject, TouchEvent, useEffect, useState} from 'react';
 import {useLingui} from '@lingui/react';
 import {Start} from '@client/ui/icons';
 
 import Badge from '../general/Badge';
 import Size from '../general/Size';
 
+const useRefTextOverflowed = (ref: RefObject<HTMLElement>) => {
+  const [overflowed, setOverflowed] = useState(false);
+
+  useEffect(() => {
+    if (ref.current) {
+      const {current} = ref;
+      setOverflowed(current.scrollWidth > current.clientWidth);
+    }
+  }, [ref, ref?.current?.scrollWidth, ref?.current?.clientWidth]);
+
+  return overflowed;
+}
+
 interface SidebarFilterProps {
   children?: ReactNode[];
   name: string;
@@ -27,6 +40,9 @@ const SidebarFilter: FC<SidebarFilterProps> = ({
   size,
   handleClick,
 }: SidebarFilterProps) => {
+  const nameSpanRef = createRef<HTMLSpanElement>();
+  const overflowed = useRefTextOverflowed(nameSpanRef);
+
   const {i18n} = useLingui();
 
   const [expanded, setExpanded] = useState(false);
@@ -67,17 +83,6 @@ const SidebarFilter: FC<SidebarFilterProps> = ({
     }
   }
 
-  const setTitleForOverflowedName = (event: MouseEvent) => {
-    const target = event.target as HTMLSpanElement;
-    const overflowed = target.scrollWidth > target.clientWidth;
-    target.title = overflowed ? target.textContent || '' : '';
-  };
-
-  const unsetTitle = (event: MouseEvent) => {
-    const target = event.target as HTMLSpanElement;
-    target.title = '';
-  };
-
   return (
     <li>
       <div css={flexCss}>
@@ -101,7 +106,7 @@ const SidebarFilter: FC<SidebarFilterProps> = ({
           role="menuitem"
         >
           {icon}
-          <span className="name" onMouseOver={setTitleForOverflowedName} onMouseOut={unsetTitle}>
+          <span className="name" ref={nameSpanRef} title={overflowed ? name || '' : undefined}>
             {name}
           </span>
           <Badge>{count}</Badge>