fix: tooltip not showing on accordion summary

IntersectMBO · Oct 31, 2024 · bc4b736 · bc4b736
1 parent b1a61bd
commit bc4b736
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 10 deletions.
diff --git a/frontend/src/components/organisms/Constitution/Constitution.tsx b/frontend/src/components/organisms/Constitution/Constitution.tsx
@@ -78,13 +78,7 @@ export function Constitution({ constitution, metadata }: ConstitutionProps) {
     },
     a: (props) => {
       if (props.href && props.href.startsWith("#")) {
-        return (
-          <TOCLink
-            {...props}
-            callback={onTOCLinkClick}
-            disabled={props.className.includes("toc-link-h2")}
-          />
-        );
+        return <TOCLink {...props} callback={onTOCLinkClick} />;
       }
       return <a {...props} />;
     }

diff --git a/frontend/src/components/organisms/Constitution/TOCLink.tsx b/frontend/src/components/organisms/Constitution/TOCLink.tsx
@@ -5,7 +5,6 @@ interface Props {
   href: string;
   children: React.ReactNode;
   callback: () => void;
-  disabled: boolean;
 }
 /**
  * TOCLink Component
@@ -19,7 +18,7 @@ interface Props {
  * @param {Function} props.callback - A callback function to be executed after the link is clicked.
  */
 
-const TOCLink = ({ href, children, callback, disabled }: Props) => {
+const TOCLink = ({ href, children, callback }: Props) => {
   const [isActive, setIsActive] = useState(false);
   const [isTruncated, setIsTruncated] = useState(false);
   const linkRef = useRef<HTMLAnchorElement>(null);
@@ -76,7 +75,6 @@ const TOCLink = ({ href, children, callback, disabled }: Props) => {
         style={{
           color: customPalette.textBlack,
           textDecoration: "none",
-          pointerEvents: disabled ? "none" : undefined,
           maxWidth: "260px",
           whiteSpace: "nowrap",
           overflow: "hidden",

diff --git a/frontend/src/components/organisms/Constitution/TOCNested.tsx b/frontend/src/components/organisms/Constitution/TOCNested.tsx
@@ -28,6 +28,11 @@ export const TocNested = ({ headings }) => {
             },
             "&.Mui-expanded": {
               backgroundColor: customPalette.accordionBg
+            },
+            "& a": {
+              "&:active": {
+                pointerEvents: "none" // disables the href activation on click but keep tooltip showing
+              }
             }
           }}
         >