Bug fix: viewer not scrolling to toc entry correctly

__tests__/src/components/SidebarIndexTableOfContents.test.js

@@ -13,14 +13,16 @@ import manifestVersion3 from '../../fixtures/version-3/structures.json';
  */
 function createWrapper(props) {
   const manifest = Utils.parseManifest(props.manifest ? props.manifest : manifestVersion2);
+  const containerElement = document.createElement('div');
+  const mockRef = { current: containerElement };
   return render(
     <SidebarIndexTableOfContents
       id="something"
       classes={{}}
       treeStructure={props.treeStructure ? props.treeStructure : manifest.getDefaultTree()}
       visibleNodeIds={props.visibleNodeIds ? props.visibleNodeIds : []}
       expandedNodeIds={props.expandedNodeIds ? props.expandedNodeIds : []}
-      containerRef={props.containerRef}
+      containerRef={mockRef}
       nodeIdToScrollTo={props.nodeIdToScrollTo}
       {...props}
     />,
@@ -33,10 +35,13 @@ function createWrapper(props) {
  * write a reasonable test for it)
  */
 function createInteractiveWrapper({ manifest = manifestVersion3, ...props }) {
+  const containerElement = document.createElement('div');
+  const mockRef = { current: containerElement };
   return render(
     <ConnectedSidebarIndexTableOfContents
       id="something"
       windowId="a"
+      containerRef={mockRef}
       {...props}
     />,
     {
@@ -59,7 +64,7 @@ function createInteractiveWrapper({ manifest = manifestVersion3, ...props }) {
   );
 }
 
-describe('SidebarIndexTableOfContents', () => {
+describe('SidebarIndexTableOfContents', async () => {
   let setCanvas;
 
   beforeEach(() => {
@@ -100,6 +105,7 @@ describe('SidebarIndexTableOfContents', () => {
       },
     });
     expect(screen.getByRole('treeitem')).toBeInTheDocument();
+    unmount();
   });
 
   it('accepts missing nodes property for tree structure and tree nodes', () => {
@@ -242,9 +248,7 @@ describe('SidebarIndexTableOfContents', () => {
     expect(store.getState().windows.a.canvasId).toEqual('http://foo.test/1/canvas/c9');
 
     const leafNode3 = screen.getAllByRole('treeitem')[4];
-    act(() => {
-      leafNode3.focus();
-    });
+    leafNode3.focus();
     await user.keyboard('{Enter}');
     expect(store.getState().windows.a.canvasId).toEqual('http://foo.test/1/canvas/c10');
   });

src/components/SidebarIndexTableOfContents.js

@@ -1,3 +1,4 @@
+import { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { alpha, styled } from '@mui/material/styles';
 import { TreeView } from '@mui/x-tree-view/TreeView';
@@ -44,16 +45,37 @@ function deepFind(treeNode, id) {
 }
 
 /** Wrap <ScrollTo> to remove the nodeId prop required for MUI's TreeView */
-const ScrollToForTreeItem = ({ children, nodeId, ...props }) => (
-  <ScrollTo
-    {...props}
-  >
-    { children }
-  </ScrollTo>
-);
+function ScrollToForTreeItem(
+  {
+    children, nodeId, containerRef, ...props
+  },
+) {
+  const [containerReady, setContainerReady] = useState(false);
+
+  useEffect(() => {
+    if (containerRef && containerRef.current) {
+      setContainerReady(true);
+    }
+  }, [containerRef]);
 
+  if (containerReady) {
+    return (
+      <ScrollTo
+        containerRef={containerRef}
+        {...props}
+      >
+        {children}
+      </ScrollTo>
+    );
+  }
+  return null;
+}
 ScrollToForTreeItem.propTypes = {
   children: PropTypes.node.isRequired,
+  containerRef: PropTypes.oneOfType([
+    PropTypes.func,
+    PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
+  ]).isRequired,
   nodeId: PropTypes.string.isRequired,
 };