Just do the focus in ComponentDidUpdate

openstax · Nov 12, 2024 · 0642746 · 0642746
1 parent b7aab4b
commit 0642746
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 34 deletions.
diff --git a/src/app/components/MainContent.tsx b/src/app/components/MainContent.tsx
@@ -13,7 +13,6 @@ interface Props {
   className?: string;
   dangerouslySetInnerHTML?: { __html: string; };
   textSize?: TextResizerValue;
-  doFocus?: boolean;
 }
 // tslint:disable-next-line:variable-name
 const ContentStyles = styled(({ textSize, ...props }) => <DynamicContentStyles {...props} />)`
@@ -30,34 +29,6 @@ const ContentStyles = styled(({ textSize, ...props }) => <DynamicContentStyles {
   }
 `;
 
-function InnerContent({
-  book,
-  children,
-  doFocus,
-  ...props
-}: React.PropsWithChildren<Omit<Props, 'className'>>) {
-  React.useEffect(
-    () => {
-      if (window && doFocus) {
-        window.document.querySelector('main')?.focus();
-        window.scrollTo(0, 0);
-      }
-    },
-    [doFocus]
-  );
-
-  return (
-    <ContentStyles
-      id={MAIN_CONTENT_ID}
-      book={book}
-      tabIndex={-1}
-      {...props}
-    >
-      {children}
-    </ContentStyles>
-  );
-}
-
 // tslint:disable-next-line:variable-name
 const MainContent = React.forwardRef<HTMLDivElement, React.PropsWithChildren<Props>>(
   ({book, children, className, ...props}, ref) => <Consumer>
@@ -66,9 +37,14 @@ const MainContent = React.forwardRef<HTMLDivElement, React.PropsWithChildren<Pro
       className={className}
       tabIndex={-1}
     >
-      <InnerContent book={book} {...props}>
+      <ContentStyles
+        id={MAIN_CONTENT_ID}
+        book={book}
+        tabIndex={-1}
+        {...props}
+      >
         {children}
-      </InnerContent>
+      </ContentStyles>
     </main>}
   </Consumer>
 );

diff --git a/src/app/content/components/Page/PageComponent.tsx b/src/app/content/components/Page/PageComponent.tsx
@@ -37,7 +37,6 @@ export default class PageComponent extends Component<PagePropTypes> {
   private scrollToTopOrHashManager = stubScrollToTopOrHashManager;
   private processing: Array<Promise<void>> = [];
   private componentDidUpdateCounter = 0;
-  private doFocus = false;
 
   public getTransformedContent = () => {
     const {book, page, services} = this.props;
@@ -90,7 +89,6 @@ export default class PageComponent extends Component<PagePropTypes> {
     // per rerender. componentDidUpdate is called multiple times when user navigates quickly.
     const runId = this.getRunId();
 
-    this.doFocus = true;
     // If page has changed, call postProcess that will remove old and attach new listerns and start mathjax typesetting.
     if (prevProps.page !== this.props.page) {
       this.postProcess();
@@ -99,6 +97,7 @@ export default class PageComponent extends Component<PagePropTypes> {
     // Wait for the mathjax promise set by postProcess from previous or current componentDidUpdate call.
     await Promise.all(this.processing);
 
+    this.container.current?.focus();
     this.scrollToTopOrHashManager(prevProps.scrollToTopOrHash, this.props.scrollToTopOrHash);
 
     const searchHighlightsChanged = !isEqual(
@@ -173,7 +172,6 @@ export default class PageComponent extends Component<PagePropTypes> {
         ref={this.container}
         dangerouslySetInnerHTML={{ __html: html}}
         textSize={this.props.textSize}
-        doFocus={this.doFocus}
       />
       {this.props.children}
     </React.Fragment>;