fix(anchor): affichage de l'ancre au niveau de l'accordéon sur les `f…

…iches-ministère-travail` (#5831)
SocialGouv · May 7, 2024 · 0bf84f4 · 0bf84f4
1 parent 059572e
commit 0bf84f4
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 3 deletions.
diff --git a/packages/code-du-travail-frontend/pages/fiche-ministere-travail/[slug].tsx b/packages/code-du-travail-frontend/pages/fiche-ministere-travail/[slug].tsx
@@ -62,7 +62,12 @@ function Fiche(props: Props): JSX.Element {
   }, [sections]);
 
   const { asPath } = useRouter();
-  const anchor = asPath.split("#")[1];
+  const [anchor, setAnchor] = React.useState<string[]>([]);
+
+  React.useEffect(() => {
+    const hash = asPath.split("#")[1];
+    if (hash) setAnchor([hash]);
+  }, [asPath]);
 
   // titleless section have the page title but no anchor.
   const untitledSection = sections.find((section) => !section.anchor);
@@ -79,8 +84,9 @@ function Fiche(props: Props): JSX.Element {
       >
         {untitledSection && <Html>{untitledSection.html}</Html>}
         <Accordion
+          key={anchor.join(",")} // Add key prop to force rerender when anchor array changes
           titleLevel={2}
-          preExpanded={[anchor]}
+          preExpanded={anchor}
           items={titledSections}
         />
       </StyledAnswer>

diff --git a/packages/react-ui/src/Accordion/index.js b/packages/react-ui/src/Accordion/index.js
@@ -20,8 +20,22 @@ export const Accordion = ({
   const AccordionItemButton = variants[variant].ItemButton;
   const AccordionItemPanel = variants[variant].ItemPanel;
   /* eslint-enable */
+
+  React.useEffect(() => {
+    if (props?.preExpanded?.length && props.preExpanded[0]?.length) {
+      const anchor = document?.querySelector(`#${props.preExpanded[0]}`);
+      if (anchor) {
+        anchor.scrollIntoView();
+      }
+    }
+  }, [props.preExpanded]);
   return (
-    <AccordionVariant allowZeroExpanded allowMultipleExpanded {...props}>
+    <AccordionVariant
+      {...props}
+      allowZeroExpanded
+      allowMultipleExpanded
+      preExpanded={props.preExpanded ?? []}
+    >
       {items.map(({ body, icon, id, title }, index) => (
         <div id={id} key={`${id}-${index}`}>
           <AccordionItem