From 1e4434ecc46fd7e5ef202766cc3f39b77eb14ba1 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 27 Feb 2019 13:11:23 -0800
Subject: [PATCH] Changed select-on-click to select-on-mouse-down and fixed a
 scrollIntoView problem

---
 src/devtools/views/Element.css |  1 -
 src/devtools/views/Element.js  | 10 +++++++---
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/devtools/views/Element.css b/src/devtools/views/Element.css
index 97b02258a2..a13366ca50 100644
--- a/src/devtools/views/Element.css
+++ b/src/devtools/views/Element.css
@@ -2,7 +2,6 @@
 .SelectedElement {
   width: 100%;
   border-radius: 0.25em;
-  cursor: pointer;
   position: relative;
   white-space: nowrap;
   line-height: var(--line-height-data);
diff --git a/src/devtools/views/Element.js b/src/devtools/views/Element.js
index c87b11b480..c0cb4ab34a 100644
--- a/src/devtools/views/Element.js
+++ b/src/devtools/views/Element.js
@@ -46,14 +46,18 @@ export default function ElementView({ index, style }: Props) {
   useEffect(() => {
     if (isSelected) {
       if (ref.current !== null) {
-        ref.current.scrollIntoView();
+        ref.current.scrollIntoView({
+          behavior: 'auto',
+          block: 'nearest',
+          inline: 'nearest',
+        });
       }
     }
   }, [isSelected]);
 
   // TODO Add click and key handlers for toggling element open/close state.
 
-  const handleClick = useCallback(
+  const handleMouseDown = useCallback(
     ({ metaKey }) => {
       if (id !== null) {
         selectElementByID(metaKey ? null : id);
@@ -80,7 +84,7 @@ export default function ElementView({ index, style }: Props) {
   return (
     <div
       className={isSelected ? styles.SelectedElement : styles.Element}
-      onClick={handleClick}
+      onMouseDown={handleMouseDown}
       onDoubleClick={handleDoubleClick}
       style={{
         ...style, // "style" comes from react-window