Åpning av accordion og readmore-komponenter ved redaktørvarsel

src/components/_common/accordion/Accordion.tsx

@@ -12,13 +12,15 @@ import { classNames } from 'utils/classnames';
 import { handleStickyScrollOffset } from 'utils/scroll-to';
 
 import defaultHtml from 'components/_common/parsedHtml/DefaultHtmlStyling.module.scss';
+import { useCheckAndOpenAccordionPanel } from 'store/hooks/useCheckAndOpenAccordionPanel';
 import styles from './Accordion.module.scss';
 
 type AccordionProps = PartConfigAccordion;
 type PanelItem = AccordionProps['accordion'][number];
 
 export const Accordion = ({ accordion }: AccordionProps) => {
     const itemRefs = useRef<(HTMLDivElement | null)[]>([]);
+    const divRefs = useRef<Array<React.RefObject<HTMLDivElement>>>([]);
     const contentProps = usePageContentProps();
     const { context } = getDecoratorParams(contentProps);
     const { editorView, type } = contentProps;
@@ -47,20 +49,11 @@ export const Accordion = ({ accordion }: AccordionProps) => {
         });
     };
 
-    useEffect(() => {
-        if (window.location.toString().includes('expandall=true')) {
-            expandAll();
-            return;
-        }
-        const anchorHash = window.location.hash || '';
-        const matchingAccordion = accordion.findIndex(
-            (item) => validatePanel(item) && item.anchorId === anchorHash.slice(1)
-        );
-        if (matchingAccordion !== -1) {
-            setOpenAccordions([matchingAccordion]);
-        }
-        /* eslint-disable-next-line react-hooks/exhaustive-deps */
-    }, []);
+    if (divRefs.current.length !== accordion.length) {
+        divRefs.current = accordion.map(() => React.createRef<HTMLDivElement>());
+    }
+
+    useCheckAndOpenAccordionPanel(openAccordions, setOpenAccordions, divRefs.current, expandAll);
 
     // Show all panels in edit mode, but only valid panels in view mode
     const validAccordion = accordion.filter(validatePanel);
@@ -76,9 +69,7 @@ export const Accordion = ({ accordion }: AccordionProps) => {
                         className={styles.item}
                         open={openAccordions.includes(index)}
                         onOpenChange={(open) => openChangeHandler(open, item.title, index)}
-                        ref={(el) => {
-                            itemRefs.current[index] = el;
-                        }}
+                        ref={divRefs.current[index]}
                         tabIndex={-1}
                     >
                         <DSAccordion.Header className={styles.header} id={item.anchorId}>

src/components/_common/expandable/Expandable.tsx

@@ -1,15 +1,16 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useRef, useState } from 'react';
 import { ExpansionCard } from '@navikt/ds-react';
 import { BarChartIcon, BriefcaseClockIcon, CalendarIcon, TasklistIcon } from '@navikt/aksel-icons';
 import { AnalyticsEvents, logAnalyticsEvent } from 'utils/analytics';
 import { usePageContentProps } from 'store/pageContext';
 import { getDecoratorParams } from 'utils/decorator-utils';
 import { innholdsTypeMap } from 'types/content-props/_content-common';
 import { classNames } from 'utils/classnames';
-import { smoothScrollToTarget, handleStickyScrollOffset } from 'utils/scroll-to';
+import { handleStickyScrollOffset } from 'utils/scroll-to';
 import { Shortcuts, useShortcuts } from 'utils/useShortcuts';
 import { ProductDetailType } from 'types/content-props/product-details';
 
+import { useCheckAndOpenPanel } from 'store/hooks/useCheckAndOpenPanel';
 import style from './Expandable.module.scss';
 
 type Props = {
@@ -45,6 +46,8 @@ export const Expandable = ({
         },
     });
 
+    useCheckAndOpenPanel(isOpen, setIsOpen, accordionRef, anchorId);
+
     const toggleExpandCollapse = (isOpening: boolean, tittel: string) => {
         setIsOpen(isOpening);
         handleStickyScrollOffset(isOpening, accordionRef.current);
@@ -58,37 +61,6 @@ export const Expandable = ({
         });
     };
 
-    const checkAndOpenPanel = () => {
-        if (isOpen) {
-            return;
-        }
-
-        if (window.location.toString().includes('expandall=true')) {
-            setIsOpen(true);
-            return;
-        }
-
-        const targetId = window.location.hash.replace('#', '');
-        if (!targetId) {
-            return;
-        }
-
-        if (targetId === anchorId) {
-            setIsOpen(true);
-            return;
-        }
-
-        const elementWithId = document.getElementById(targetId);
-        if (accordionRef.current?.contains(elementWithId)) {
-            setIsOpen(true);
-            setTimeout(() => smoothScrollToTarget(targetId), 500);
-        }
-    };
-
-    const hashChangeHandler = () => {
-        checkAndOpenPanel();
-    };
-
     const getHeaderIcon = () => {
         if (expandableType === ProductDetailType.PROCESSING_TIMES) {
             return <BriefcaseClockIcon aria-hidden className={style.headerIcon} />;
@@ -105,21 +77,6 @@ export const Expandable = ({
         return null;
     };
 
-    useEffect(() => {
-        window.addEventListener('hashchange', hashChangeHandler);
-
-        return () => {
-            window.removeEventListener('hashchange', hashChangeHandler);
-        };
-
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-
-    useEffect(() => {
-        checkAndOpenPanel();
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [anchorId]);
-
     // Adjust appearande in styling if not type was set for this content
     // This is the wrong use of this component, but some legacy pages have still to
     // be upradet editorial wise.

src/components/parts/readMorePart/ReadMorePart.module.scss

@@ -2,6 +2,7 @@
     margin-bottom: var(--a-spacing-9);
 
     :global(.navds-read-more__button) {
+        z-index: 1;
         margin-bottom: var(--a-spacing-3);
         background-color: var(--a-blue-50);
         padding: var(--a-spacing-2) var(--a-spacing-6) var(--a-spacing-2) 13px;

src/components/parts/readMorePart/ReadMorePart.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useRef, useState } from 'react';
 import { ReadMore } from '@navikt/ds-react';
 import { EditorHelp } from 'components/_editor-only/editor-help/EditorHelp';
 import { ParsedHtml } from 'components/_common/parsedHtml/ParsedHtml';
@@ -13,6 +13,7 @@ import { PartComponentProps, PartType } from 'types/component-props/parts';
 import { ProcessedHtmlProps } from 'types/processed-html-props';
 
 import defaultHtml from 'components/_common/parsedHtml/DefaultHtmlStyling.module.scss';
+import { useCheckAndOpenPanel } from 'store/hooks/useCheckAndOpenPanel';
 import styles from './ReadMorePart.module.scss';
 
 export type PartConfigReadMore = {
@@ -32,11 +33,7 @@ export const ReadMorePart = ({ config }: PartComponentProps<PartType.ReadMore>)
         callback: () => setIsOpen(true),
     });
 
-    useEffect(() => {
-        if (window.location.toString().includes('expandall=true')) {
-            setIsOpen(true);
-        }
-    }, []);
+    useCheckAndOpenPanel(isOpen, setIsOpen, divRef);
 
     if (!config?.html || !config.title) {
         return <EditorHelp text={'Legg inn tittel og beskrivelse for "les mer".'} type={'error'} />;

src/store/hooks/useCheckAndOpenAccordionPanel.ts

@@ -0,0 +1,40 @@
+import { useEffect } from 'react';
+import { smoothScrollToTarget } from 'utils/scroll-to';
+
+export const useCheckAndOpenAccordionPanel = (
+    openPanels: number[],
+    setOpenPanels: (indexes: number[]) => void,
+    refs: React.RefObject<HTMLDivElement>[],
+    expandAll: () => void
+) => {
+    const checkAndOpenPanels = () => {
+        const targetId = window.location.hash.replace('#', '');
+        const elementWithId = document.getElementById(targetId);
+
+        if (window.location.toString().includes('expandall=true')) {
+            expandAll();
+            return;
+        }
+
+        if (!targetId) return;
+
+        for (let i = 0; i < refs.length; i++) {
+            if (refs[i].current?.contains(elementWithId)) {
+                setOpenPanels([...openPanels, i]);
+                setTimeout(() => smoothScrollToTarget(targetId), 500);
+                return;
+            }
+        }
+    };
+
+    useEffect(() => {
+        window.addEventListener('hashchange', checkAndOpenPanels);
+        return () => {
+            window.removeEventListener('hashchange', checkAndOpenPanels);
+        };
+    }, []);
+
+    useEffect(() => {
+        checkAndOpenPanels();
+    }, []);
+};

src/store/hooks/useCheckAndOpenPanel.ts

@@ -0,0 +1,49 @@
+import { useEffect } from 'react';
+import { smoothScrollToTarget } from 'utils/scroll-to';
+
+export const useCheckAndOpenPanel = (
+    isOpen: boolean,
+    setIsOpen: (isOpen: boolean) => void,
+    ref: React.RefObject<HTMLDivElement>,
+    anchorId?: string
+) => {
+    const checkAndOpenPanel = () => {
+        const targetId = window.location.hash.replace('#', '');
+        const elementWithId = document.getElementById(targetId);
+
+        if (isOpen) {
+            return;
+        }
+
+        if (window.location.toString().includes('expandall=true')) {
+            setIsOpen(true);
+            return;
+        }
+
+        if (!targetId) {
+            return;
+        }
+
+        if (targetId === anchorId) {
+            setIsOpen(true);
+            return;
+        }
+
+        if (ref.current?.contains(elementWithId)) {
+            setIsOpen(true);
+            setTimeout(() => smoothScrollToTarget(targetId), 500);
+        }
+    };
+
+    useEffect(() => {
+        window.addEventListener('hashchange', checkAndOpenPanel);
+
+        return () => {
+            window.removeEventListener('hashchange', checkAndOpenPanel);
+        };
+    }, []);
+
+    useEffect(() => {
+        checkAndOpenPanel();
+    }, [anchorId]);
+};