Handle forwardedRef properly

openstax · May 14, 2024 · a052faa · a052faa
1 parent 98d8d6e
commit a052faa
Showing 1 changed file with 5 additions and 2 deletions.
diff --git a/src/app/components/MainContent.tsx b/src/app/components/MainContent.tsx
@@ -31,15 +31,18 @@ const ContentStyles = styled(({ textSize, ...props }) => <DynamicContentStyles {
 
 // tslint:disable-next-line:variable-name
 const MainContent = React.forwardRef<HTMLDivElement, React.PropsWithChildren<Props>>(
-  ({book, children, className, ...props}, ref) => {
+  ({book, children, className, ...props}, forwardedRef) => {
     const initialLoad = React.useRef(true);
+    const ref = React.useRef<HTMLDivElement>(null);
+
+    React.useImperativeHandle(forwardedRef, () => ref.current as HTMLDivElement);
 
     React.useEffect(
       () => {
         if (initialLoad.current) {
           initialLoad.current = false;
         } else {
-          (ref as React.MutableRefObject<HTMLDivElement>).current?.focus();
+          ref.current?.focus();
         }
       },
       [children, ref]