Fix focus bugs that occur on initial load. (#982)

* Prevent side panel stealing focus on load.
* Sidebar tabs stay accessible on load

See #973 and #977.

Author: microbit-robert

src/simulator/Simulator.tsx

@@ -3,7 +3,14 @@
  *
  * SPDX-License-Identifier: MIT
  */
-import { AspectRatio, Box, Flex, useToken, VStack } from "@chakra-ui/react";
+import {
+  AspectRatio,
+  Box,
+  Flex,
+  usePrevious,
+  useToken,
+  VStack,
+} from "@chakra-ui/react";
 import { useEffect, useRef, useState } from "react";
 import { IntlShape, useIntl } from "react-intl";
 import HideSplitViewButton from "../common/SplitView/HideSplitViewButton";
@@ -67,16 +74,20 @@ const Simulator = ({
   const simHeight = contentRect?.height ?? 0;
   const [brand500] = useToken("colors", ["brand.500"]);
   const [running, setRunning] = useState<RunningStatus>(RunningStatus.STOPPED);
+  const previouslyShown = usePrevious(shown);
 
   useEffect(() => {
     if (shown) {
-      ref.current!.focus();
+      // Prevents the simulator stealing focus on initial load.
+      if (previouslyShown !== undefined && previouslyShown !== shown) {
+        ref.current!.focus();
+      }
     } else {
       if (simFocus) {
         showSimulatorButtonRef.current!.focus();
       }
     }
-  }, [showSimulatorButtonRef, shown, simFocus]);
+  }, [previouslyShown, showSimulatorButtonRef, shown, simFocus]);
 
   return (
     <DeviceContextProvider value={simulator.current}>

src/workbench/SideBar.tsx

@@ -11,6 +11,7 @@ import {
   TabPanel,
   TabPanels,
   Tabs,
+  usePrevious,
   VStack,
 } from "@chakra-ui/react";
 import { ReactNode, useCallback, useEffect, useMemo, useRef } from "react";
@@ -130,11 +131,18 @@ const SideBar = ({
     }
   }, [onSidebarExpand, panes, onTabIndexChange, tab, slug, focus]);
 
+  const previouslyShown = usePrevious(shown);
   useEffect(() => {
-    if (shown && (!slug || focus)) {
+    // Prevents the sidebar stealing focus on initial load.
+    if (
+      shown &&
+      (!slug || focus) &&
+      previouslyShown !== undefined &&
+      previouslyShown !== shown
+    ) {
       setPanelFocus();
     }
-  }, [shown, slug, focus]);
+  }, [previouslyShown, shown, slug, focus]);
 
   const handleTabChange = useCallback(
     (index: number) => {

src/workbench/SideBarTab.tsx

@@ -29,8 +29,9 @@ const SideBarTab = ({
   const ref = useRef<HTMLButtonElement>(null);
   useEffect(() => {
     // Override tabindex.
+    // Has no dependencies as it needs to run for every re-render.
     ref.current!.setAttribute("tabindex", "0");
-  }, [tabIndex]);
+  });
   return (
     <Tab
       ref={ref}