From 8ce6deaff29eb880e905d000d21194518b371941 Mon Sep 17 00:00:00 2001
From: Zibi Braniecki <zbraniecki@mozilla.com>
Date: Fri, 26 Jun 2020 00:14:23 +0000
Subject: [PATCH] Bug 1641719 - Don`t set 0 state in TreeView on first click.
 r=bomsy

Differential Revision: https://phabricator.services.mozilla.com/D79322
---
 .../client/shared/components/tree/TreeView.js | 26 +++++++++++++++++++
 1 file changed, 26 insertions(+)

diff --git a/devtools/client/shared/components/tree/TreeView.js b/devtools/client/shared/components/tree/TreeView.js
index 2a2dd96caf8b..8057681f49fe 100644
--- a/devtools/client/shared/components/tree/TreeView.js
+++ b/devtools/client/shared/components/tree/TreeView.js
@@ -222,6 +222,7 @@ define(function(require, exports, module) {
         selected: props.selected,
         active: props.active,
         lastSelectedIndex: props.defaultSelectFirstNode ? 0 : null,
+        mouseDown: false,
       };
 
       this.treeRef = createRef();
@@ -255,6 +256,26 @@ define(function(require, exports, module) {
       this.setState(Object.assign({}, this.state, state));
     }
 
+    shouldComponentUpdate(nextProps, nextState) {
+      const {
+        expandedNodes,
+        columns,
+        selected,
+        active,
+        lastSelectedIndex,
+        mouseDown,
+      } = this.state;
+
+      return (
+        expandedNodes !== nextState.expandedNodes ||
+        columns !== nextState.columns ||
+        selected !== nextState.selected ||
+        active !== nextState.active ||
+        lastSelectedIndex !== nextState.lastSelectedIndex ||
+        mouseDown === nextState.mouseDown
+      );
+    }
+
     componentDidUpdate() {
       const selected = this.getSelectedRow();
       if (selected || this.state.active) {
@@ -313,6 +334,9 @@ define(function(require, exports, module) {
     // Event Handlers
 
     onFocus(_event) {
+      if (this.state.mouseDown) {
+        return;
+      }
       // Set focus to the first element, if none is selected or activated
       // This is needed because keyboard navigation won't work without an element being selected
       this.componentDidUpdate();
@@ -716,6 +740,8 @@ define(function(require, exports, module) {
           onFocus: this.onFocus,
           onKeyDown: this.onKeyDown,
           onContextMenu: onContextMenuTree && onContextMenuTree.bind(this),
+          onMouseDown: () => this.setState({ mouseDown: true }),
+          onMouseUp: () => this.setState({ mouseDown: false }),
           onClick: () => {
             // Focus should always remain on the tree container itself.
             this.treeRef.current.focus();