Prevent search in VizPicker from stealing focus (#15802)

Fixes #15569 focus issue in viz picker search
* added state to not set focus on search every render
* move to new component to handle focus

public/app/features/dashboard/panel_editor/VisualizationTab.tsx

@@ -14,10 +14,10 @@ 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';
+import { VizPickerSearch } from './VizPickerSearch';
 
 interface Props {
   panel: PanelModel;
@@ -33,18 +33,19 @@ interface State {
   isVizPickerOpen: boolean;
   searchQuery: string;
   scrollTop: number;
+  hasBeenFocused: boolean;
 }
 
 export class VisualizationTab extends PureComponent<Props, State> {
   element: HTMLElement;
   angularOptions: AngularComponent;
-  searchInput: HTMLElement;
 
   constructor(props) {
     super(props);
 
     this.state = {
       isVizPickerOpen: this.props.urlOpenVizPicker,
+      hasBeenFocused: false,
       searchQuery: '',
       scrollTop: 0,
     };
@@ -162,7 +163,7 @@ export class VisualizationTab extends PureComponent<Props, State> {
       this.props.updateLocation({ query: { openVizPicker: null }, partial: true });
     }
 
-    this.setState({ isVizPickerOpen: false });
+    this.setState({ isVizPickerOpen: false, hasBeenFocused: false });
   };
 
   onSearchQueryChange = (value: string) => {
@@ -173,23 +174,16 @@ export class VisualizationTab extends PureComponent<Props, State> {
 
   renderToolbar = (): JSX.Element => {
     const { plugin } = this.props;
-    const { searchQuery } = this.state;
+    const { isVizPickerOpen, searchQuery } = this.state;
 
-    if (this.state.isVizPickerOpen) {
+    if (isVizPickerOpen) {
       return (
-        <>
-          <FilterInput
-            labelClassName="gf-form--has-input-icon"
-            inputClassName="gf-form-input width-13"
-            placeholder=""
-            onChange={this.onSearchQueryChange}
-            value={searchQuery}
-            ref={elem => elem && elem.focus()}
-          />
-          <button className="btn btn-link toolbar__close" onClick={this.onCloseVizPicker}>
-            <i className="fa fa-chevron-up" />
-          </button>
-        </>
+        <VizPickerSearch
+          plugin={plugin}
+          searchQuery={searchQuery}
+          onChange={this.onSearchQueryChange}
+          onClose={this.onCloseVizPicker}
+        />
       );
     } else {
       return (

public/app/features/dashboard/panel_editor/VizPickerSearch.tsx

+import React, { PureComponent } from 'react';
+
+import { FilterInput } from 'app/core/components/FilterInput/FilterInput';
+
+import { PanelPlugin } from 'app/types';
+
+interface Props {
+  plugin: PanelPlugin;
+  searchQuery: string;
+  onChange: (query: string) => void;
+  onClose: () => void;
+}
+
+export class VizPickerSearch extends PureComponent<Props> {
+  render() {
+    const { searchQuery, onChange, onClose } = this.props;
+    return (
+      <>
+        <FilterInput
+          labelClassName="gf-form--has-input-icon"
+          inputClassName="gf-form-input width-13"
+          placeholder=""
+          onChange={onChange}
+          value={searchQuery}
+          ref={element => element && element.focus()}
+        />
+        <button className="btn btn-link toolbar__close" onClick={onClose}>
+          <i className="fa fa-chevron-up" />
+        </button>
+      </>
+    );
+  }
+}