fix: workato accordion groups (#1300)

packages/ui/app/package.json

@@ -128,6 +128,7 @@
     "unist-util-visit": "^5.0.0",
     "url-join": "5.0.0",
     "use-memo-one": "^1.1.3",
+    "uuid": "^9.0.0",
     "vfile": "^6.0.1",
     "zod": "^3.23.8"
   },
@@ -161,6 +162,7 @@
     "@types/react-dom": "^18.2.18",
     "@types/react-test-renderer": "^18.0.7",
     "@types/tinycolor2": "^1.4.6",
+    "@types/uuid": "^9.0.1",
     "@vitejs/plugin-react": "^4.2.1",
     "autoprefixer": "^10.4.16",
     "chromatic": "^11.3.0",

packages/ui/app/src/mdx/components/accordion/AccordionGroup.tsx

@@ -4,6 +4,7 @@ import { NavArrowRight } from "iconoir-react";
 import { useAtom } from "jotai";
 import { NextRouter } from "next/router";
 import { FC, ReactNode, useCallback, useEffect, useState } from "react";
+import { v4 } from "uuid";
 import { ANCHOR_ATOM } from "../../../atoms";
 
 export interface AccordionItemProps {
@@ -16,19 +17,21 @@ export interface AccordionGroupProps {
     items: AccordionItemProps[];
     router: NextRouter;
     toc?: boolean;
+    key: string;
 }
 
 export const AccordionGroup: FC<AccordionGroupProps> = ({ items = [], toc: parentToc = true }) => {
+    const [key, _setKey] = useState(v4());
     const [activeTabs, setActiveTabs] = useState<string[]>([]);
     const [anchor, setAnchor] = useAtom(ANCHOR_ATOM);
     useEffect(() => {
         if (anchor != null) {
-            const anchorTab = items.findIndex((tab) => slug(tab.title) === anchor);
+            const anchorTab = items.findIndex((tab) => slug(`${tab.title}-${key}`) === anchor);
             if (anchorTab >= 0) {
                 setActiveTabs((prev) => (prev.includes(anchorTab.toString()) ? prev : [...prev, anchorTab.toString()]));
             }
         }
-    }, [anchor, items]);
+    }, [anchor, items, key]);
 
     const handleValueChange = useCallback(
         (nextActiveTabs: string[]) => {
@@ -37,13 +40,13 @@ export const AccordionGroup: FC<AccordionGroupProps> = ({ items = [], toc: paren
                 if (added[0] != null) {
                     const addedItem = items[parseInt(added[0])];
                     if (addedItem != null) {
-                        setAnchor(slug(addedItem.title));
+                        setAnchor(slug(`${addedItem.title}-${key}`));
                     }
                 }
                 return nextActiveTabs;
             });
         },
-        [items, setAnchor],
+        [items, setAnchor, key],
     );
 
     return (