Solution for tc-tooltip issues with disabled components

Resolves itenium-be#224 and itenium-be#231
svitenium · Apr 14, 2023 · 6387147 · 6387147
1 parent fb29bc6
commit 6387147
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 3 deletions.
diff --git a/frontend/src/components/controls/Tooltip.tsx b/frontend/src/components/controls/Tooltip.tsx
@@ -3,6 +3,7 @@ import RcTooltip from 'rc-tooltip';
 
 type TooltipProps = {
   title: string,
+  identifier?: string;
   placement?: 'left' | 'right' | 'top' | 'bottom' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight',
   children: ReactElement,
   mouseEnterDelay?: number;
@@ -13,8 +14,9 @@ type TooltipProps = {
 // --> The user can craft a malicious script with the NotesModalButton and this will just execute it!
 
 
-export const Tooltip = ({children, title, placement = 'left', mouseEnterDelay = 0.6}: TooltipProps) => (
+export const Tooltip = ({children, title, placement = 'left', mouseEnterDelay = 0.6, identifier = ''}: TooltipProps) => (
   <RcTooltip
+    overlayClassName={identifier}
     placement={placement} // ['left','right','top','bottom', 'topLeft', 'topRight', 'bottomLeft', 'bottomRight']
     trigger={['hover'/* , 'click', 'focus' */]}
     overlay={<div dangerouslySetInnerHTML={{__html: title}} />}

diff --git a/frontend/src/components/controls/form-controls/Button.tsx b/frontend/src/components/controls/form-controls/Button.tsx
@@ -51,16 +51,35 @@ const ButtonComponent = ({variant = 'primary', size = 'md', disabled, className,
     if (disabled) {
       // WORKAROUND: Tooltip not going away when the button is disabled
       // https://github.com/react-component/tooltip/issues/18#issuecomment-411476678
+      const identifier = Math.floor(Math.random() * Date.now()).toString(36)
       FinalButton = (
-        <Tooltip title={title}>
+        <Tooltip
+          title={title}
+          identifier={identifier}
+        >
           <div>
             <ReactButton
               className={className}
               variant={variant}
               size={size === 'md' ? undefined : size}
               onClick={realClick}
-              disabled={disabled}
+              active={false}
+              disabled={true}
               style={{...style, pointerEvents: 'none'}}
+              onPointerLeave={()=>{
+                const tooltips = document.getElementsByClassName(identifier);
+                for(let i = 0; i < tooltips.length; i++)
+                {
+                  tooltips[i].classList.add("rc-tooltip-hidden");
+                }
+              }}
+              onPointerEnter={()=>{
+                const tooltips = document.getElementsByClassName(identifier);
+                for(let i = 0; i < tooltips.length; i++)
+                {
+                  tooltips[i].classList.remove("rc-tooltip-hidden");
+                }
+              }}
               {...rest}
             >
               {icon ? <Icon fa={icon} size={1} style={{marginRight: children ? 6 : 0}} /> : null}