auto focus on search bar when moving over to dict

website/src/App.tsx

@@ -445,6 +445,7 @@ class App extends Component<RouteComponentProps, State> {
                     state={this.state}
                     optionsDispatch={this.handleOptionsUpdate}
                     handleSearchValueChange={this.handleSearchValueChange}
+                    pathname={this.props.location.pathname}
                 />}
                 <div className="container-fluid" data-testid="body">
                 {this.state.dictionaryStatus !== "ready" ?
@@ -578,6 +579,7 @@ class App extends Component<RouteComponentProps, State> {
                     optionsDispatch={this.handleOptionsUpdate}
                     handleSearchValueChange={this.handleSearchValueChange}
                     onBottom
+                    pathname={this.props.location.pathname}
                 />}
             </footer>
         </div>;

website/src/components/SearchBar.tsx

@@ -6,7 +6,7 @@
  *
  */
 
-import { useRef } from "react";
+import { useEffect, useRef } from "react";
 import { State } from "../types/dictionary-types";
 import {
   OptionsAction,
@@ -14,13 +14,26 @@ import {
   SearchType,
 } from "../types/dictionary-types";
 
-const SearchBar = ({ state, optionsDispatch, handleSearchValueChange, onBottom }: {
+const SearchBar = ({ state, optionsDispatch, handleSearchValueChange, onBottom, pathname }: {
   state: State
   optionsDispatch: (action: OptionsAction) => void,
   handleSearchValueChange: (searchValue: string) => void,
   onBottom?: boolean,
+  pathname: string,
 }) => {
   const inputRef = useRef<HTMLInputElement>(null);
+  useEffect(() => {
+    window.addEventListener("focus", onFocus);
+    return () => {
+      window.removeEventListener("focus", onFocus);
+    }
+  // eslint-disable-next-line
+  }, []);
+  function onFocus() {
+    if (["/", "/search"].includes(pathname)) {
+      inputRef.current?.focus();
+    }
+  }
   const LanguageToggle = ({ language }: { language: Language }) => {
     const arrowDirection = language === "Pashto" ? "right" : "left";
     return (