From 28ea0a352e5ed617d24962b7b9474b6c04d447a3 Mon Sep 17 00:00:00 2001
From: Jessica <jessicamfranco3@gmail.com>
Date: Tue, 19 Feb 2019 12:22:19 +0900
Subject: [PATCH] Scroll to newly selected component if it's out of view

---
 src/devtools/views/Element.js | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/devtools/views/Element.js b/src/devtools/views/Element.js
index 7006032af1..4fa325599d 100644
--- a/src/devtools/views/Element.js
+++ b/src/devtools/views/Element.js
@@ -1,6 +1,13 @@
 // @flow
 
-import React, { Fragment, useCallback, useContext, useMemo } from 'react';
+import React, {
+  Fragment,
+  useCallback,
+  useContext,
+  useMemo,
+  useRef,
+  useEffect,
+} from 'react';
 import { ElementTypeClass, ElementTypeFunction } from 'src/devtools/types';
 import { createRegExp } from './utils';
 import { TreeContext } from './TreeContext';
@@ -45,6 +52,13 @@ export default function ElementView({ index, style }: Props) {
   const showDollarR =
     isSelected && (type === ElementTypeClass || type === ElementTypeFunction);
 
+  const component = useRef(null);
+  useEffect(() => {
+    if (isSelected && component.current !== null) {
+      component.current.scrollIntoView();
+    }
+  }, [isSelected]);
+
   // TODO styles.SelectedElement is 100% width but it doesn't take horizontal overflow into account.
 
   return (
@@ -57,7 +71,7 @@ export default function ElementView({ index, style }: Props) {
         paddingLeft: `${(depth - baseDepth) * 0.75 + 0.25}rem`,
       }}
     >
-      <span className={styles.Component}>
+      <span ref={component} className={styles.Component}>
         <DisplayName displayName={displayName} id={id} />
         {key && (
           <Fragment>