Move focus effect to SidebarBody

src/app/content/components/TableOfContents/index.tsx

@@ -15,7 +15,6 @@ import { CloseToCAndMobileMenuButton, TOCBackButton, TOCCloseButton } from '../S
 import { Header, HeaderText, SidebarPaneBody } from '../SidebarPane';
 import { LeftArrow, TimesIcon } from '../Toolbar/styled';
 import * as Styled from './styled';
-import { assertWindow } from '../../../utils';
 import { createTrapTab, useMatchMobileMediumQuery } from '../../../reactUtils';
 
 interface SidebarProps {
@@ -52,16 +51,33 @@ function TabTrapper({
   return null;
 }
 
+
+
 // tslint:disable-next-line:variable-name
 const SidebarBody = React.forwardRef<
   HTMLElement,
   React.ComponentProps<typeof SidebarPaneBody>
 >((props, ref) => {
+  const mRef = ref as MutableRefObject<HTMLElement>;
+
+  React.useEffect(
+    () => {
+      if (props.isTocOpen) {
+        const firstItemInToc = mRef?.current?.querySelector(
+          'ol > li a, old > li summary'
+        ) as HTMLElement;
+
+        setTimeout(() => firstItemInToc?.focus(), 100);
+      }
+    },
+    [props.isTocOpen, mRef]
+  );
+
   return (
     <React.Fragment>
       {typeof window !== 'undefined' && (
         <TabTrapper
-          mRef={ref as MutableRefObject<HTMLElement>}
+          mRef={mRef}
           isTocOpen={props.isTocOpen}
         />
       )}
@@ -199,19 +215,6 @@ export class TableOfContents extends Component<SidebarProps> {
       expandCurrentChapter(this.activeSection.current);
       this.scrollToSelectedPage();
     }
-    if (this.props.isOpen && !prevProps.isOpen) {
-      const firstItemInToc = this.sidebar.current?.querySelector(
-        'ol > li a, old > li summary'
-      ) as HTMLElement;
-
-      // Something else affects focus; wait for it to pass
-      assertWindow().setTimeout(
-        () => {
-          firstItemInToc?.focus();
-        },
-        100
-      );
-    }
   }
 
   public componentWillUnmount() {