From 52c2b7606d4a6e01da0cd99170903ebcb3e3f53c Mon Sep 17 00:00:00 2001
From: Peter Holmberg <peter.hlmbrg@gmail.com>
Date: Tue, 5 Mar 2019 16:31:14 +0100
Subject: [PATCH] added state to not set focus on search every render

---
 .../panel_editor/VisualizationTab.tsx         | 21 ++++++++++++++-----
 1 file changed, 16 insertions(+), 5 deletions(-)

diff --git a/public/app/features/dashboard/panel_editor/VisualizationTab.tsx b/public/app/features/dashboard/panel_editor/VisualizationTab.tsx
index 5330baf1be6..847e185f9f9 100644
--- a/public/app/features/dashboard/panel_editor/VisualizationTab.tsx
+++ b/public/app/features/dashboard/panel_editor/VisualizationTab.tsx
@@ -14,8 +14,8 @@ import { PluginHelp } from 'app/core/components/PluginHelp/PluginHelp';
 import { FadeIn } from 'app/core/components/Animations/FadeIn';
 
 // Types
-import { PanelModel } from '../state/PanelModel';
-import { DashboardModel } from '../state/DashboardModel';
+import { PanelModel } from '../state';
+import { DashboardModel } from '../state';
 import { PanelPlugin } from 'app/types/plugins';
 import { FilterInput } from 'app/core/components/FilterInput/FilterInput';
 
@@ -33,6 +33,7 @@ interface State {
   isVizPickerOpen: boolean;
   searchQuery: string;
   scrollTop: number;
+  hasBeenFocused: boolean;
 }
 
 export class VisualizationTab extends PureComponent<Props, State> {
@@ -45,6 +46,7 @@ export class VisualizationTab extends PureComponent<Props, State> {
 
     this.state = {
       isVizPickerOpen: this.props.urlOpenVizPicker,
+      hasBeenFocused: false,
       searchQuery: '',
       scrollTop: 0,
     };
@@ -171,11 +173,20 @@ export class VisualizationTab extends PureComponent<Props, State> {
     });
   };
 
+  setSearchInputRef = (element: HTMLInputElement) => {
+    if (!this.state.hasBeenFocused) {
+      if (element) {
+        element.focus();
+      }
+    }
+    this.setState({ hasBeenFocused: true });
+  };
+
   renderToolbar = (): JSX.Element => {
     const { plugin } = this.props;
-    const { searchQuery } = this.state;
+    const { isVizPickerOpen, searchQuery } = this.state;
 
-    if (this.state.isVizPickerOpen) {
+    if (isVizPickerOpen) {
       return (
         <>
           <FilterInput
@@ -184,7 +195,7 @@ export class VisualizationTab extends PureComponent<Props, State> {
             placeholder=""
             onChange={this.onSearchQueryChange}
             value={searchQuery}
-            ref={elem => elem && elem.focus()}
+            ref={element => this.setSearchInputRef(element)}
           />
           <button className="btn btn-link toolbar__close" onClick={this.onCloseVizPicker}>
             <i className="fa fa-chevron-up" />