refactor(PrimaryModalShell): focus container with ref, get rid of use…

…Effect
wireapp · Oct 30, 2024 · 0fe1182 · 0fe1182
1 parent 191c3f9
commit 0fe1182
Showing 1 changed file with 2 additions and 10 deletions.
diff --git a/src/script/components/Modals/PrimaryModal/PrimaryModalShell/PrimaryModalShell.tsx b/src/script/components/Modals/PrimaryModal/PrimaryModalShell/PrimaryModalShell.tsx
@@ -17,7 +17,7 @@
  *
  */
 
-import {useRef, useEffect, ReactNode} from 'react';
+import {ReactNode} from 'react';
 
 import {ModalComponent} from 'Components/ModalComponent';
 
@@ -38,14 +38,6 @@ export const PrimaryModalShell = ({
   onClose,
   onBgClick,
 }: PrimaryModalShellProps) => {
-  const modalRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    if (isShown) {
-      modalRef.current?.focus();
-    }
-  }, [isShown]);
-
   return (
     <div
       id="modals"
@@ -54,7 +46,7 @@ export const PrimaryModalShell = ({
       aria-modal="true"
       aria-label={title}
       tabIndex={-1}
-      ref={modalRef}
+      ref={ref => isShown && ref?.focus()}
     >
       <ModalComponent isShown={isShown} onClosed={onClose} onBgClick={onBgClick} data-uie-name={dataUieName}>
         {isShown && children}