Merge branch 'scroll-into-view' of https://github.com/Jessidhia/react-devtools-experimental into Jessidhia-scroll-into-view

src/devtools/views/Element.js

@@ -1,6 +1,6 @@
 // @flow
 
-import React, { Fragment, useCallback, useContext, useMemo } from 'react';
+import React, { Fragment, useCallback, useContext, useEffect, useMemo, useRef } from 'react';
 import { ElementTypeClass, ElementTypeFunction } from 'src/devtools/types';
 import { createRegExp } from './utils';
 import { TreeContext } from './TreeContext';
@@ -33,6 +33,16 @@ export default function ElementView({ index, style }: Props) {
     }
   }, [id, selectOwner]);
 
+  const ref = useRef();
+
+  useEffect(() => {
+    if (isSelected) {
+      if (ref.current !== null) {
+        ref.current.scrollIntoView();
+      }
+    }
+  }, [isSelected]);
+
   // TODO Add click and key handlers for toggling element open/close state.
 
   const handleClick = useCallback(
@@ -70,7 +80,7 @@ export default function ElementView({ index, style }: Props) {
         paddingLeft: `${(depth - baseDepth) * 0.75 + 0.25}rem`,
       }}
     >
-      <span className={styles.Component}>
+      <span className={styles.Component} ref={ref}>
         <DisplayName displayName={displayName} id={((id: any): number)} />
         {key && (
           <Fragment>