Open modal only on ref callback

navikt · Oct 9, 2023 · 6caab1d · 6caab1d
1 parent 2553393
commit 6caab1d
Showing 1 changed file with 15 additions and 11 deletions.
diff --git a/src/felles-komponenter/modal/Modal.tsx b/src/felles-komponenter/modal/Modal.tsx
@@ -1,5 +1,5 @@
 import { Heading, Link, Modal as AkselModal } from '@navikt/ds-react';
-import React, { MouseEventHandler, ReactNode, useEffect, useRef } from 'react';
+import React, { MouseEventHandler, ReactNode, RefCallback, useEffect, useRef } from 'react';
 import { useNavigate } from 'react-router-dom';
 
 import { SerializedError } from '../../api/utils';
@@ -23,7 +23,7 @@ interface Props {
 }
 
 const Modal = (props: Props) => {
-    const modalRef = useRef<HTMLDialogElement | null>(null);
+    // const modalRef = useRef<HTMLDialogElement | null>(null);
     const {
         heading,
         subHeading,
@@ -49,17 +49,21 @@ const Modal = (props: Props) => {
         navigate(hovedsideRoute());
     };
 
-    useEffect(() => {
-        if (modalRef.current) {
-            if (!modalRef.current.open) {
-                modalRef.current.showModal();
-            }
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [modalRef.current]);
+    const onRefSet: RefCallback<HTMLDialogElement> = (ref) => {
+        if (ref?.open) return;
+        ref?.showModal();
+    };
+    // useEffect(() => {
+    //     if (modalRef.current) {
+    //         if (!modalRef.current.open) {
+    //             modalRef.current.showModal();
+    //         }
+    //     }
+    //     // eslint-disable-next-line react-hooks/exhaustive-deps
+    // }, [modalRef.current]);
 
     return (
-        <AkselModal ref={modalRef} portal onClose={closeFuncOrDefault} className="lg:w-120">
+        <AkselModal ref={onRefSet} portal onClose={closeFuncOrDefault} className="lg:w-120">
             <AkselModal.Header closeButton={true} aria-labelledby="modal-heading">
                 <div className="space-y-2">
                     <Heading id="modal-heading" size="large">