wip

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

@@ -159,7 +159,7 @@ export class VisualizationTab extends PureComponent<Props, State> {
             placeholder=""
             onChange={this.onSearchQueryChange}
             value={searchQuery}
-            ref={elem => (this.searchInput = elem)}
+            ref={elem => elem && elem.focus()}
           />
           <i className="gf-form-input-icon fa fa-search" />
         </label>
@@ -192,8 +192,12 @@ export class VisualizationTab extends PureComponent<Props, State> {
 
     return (
       <EditorTabBody heading="Visualization" renderToolbar={this.renderToolbar} toolbarItems={[panelHelp]}>
-        {isVizPickerOpen && <VizTypePicker current={plugin} onTypeChanged={this.onTypeChanged} searchQuery={searchQuery} />}
+        <>
+          {isVizPickerOpen && (
+            <VizTypePicker current={plugin} onTypeChanged={this.onTypeChanged} searchQuery={searchQuery} />
+          )}
           {this.renderPanelOptions()}
+        </>
       </EditorTabBody>
     );
   }

public/app/features/dashboard/dashgrid/VizTypePicker.tsx

@@ -43,7 +43,6 @@ export class VizTypePicker extends PureComponent<Props> {
         key={plugin.id}
         isCurrent={isCurrent}
         plugin={plugin}
-        isSelected={false}
         onClick={() => onTypeChanged(plugin)}
       />
     );

public/app/features/dashboard/dashgrid/VizTypePickerPlugin.tsx

-import React from 'react';
+import React from 'react';
 import classNames from 'classnames';
 import { PanelPlugin } from 'app/types/plugins';
 
 interface Props {
-  isSelected: boolean;
   isCurrent: boolean;
   plugin: PanelPlugin;
   onClick: () => void;
-  onMouseEnter: () => void;
 }
 
 const VizTypePickerPlugin = React.memo(
-  ({ isSelected, isCurrent, plugin, onClick, onMouseEnter }: Props) => {
+  ({ isCurrent, plugin, onClick }: Props) => {
     const cssClass = classNames({
       'viz-picker__item': true,
-      'viz-picker__item--selected': isSelected,
       'viz-picker__item--current': isCurrent,
     });
 
     return (
-      <div className={cssClass} onClick={onClick} title={plugin.name} onMouseEnter={onMouseEnter}>
+      <div className={cssClass} onClick={onClick} title={plugin.name}>
         <div className="viz-picker__item-name">{plugin.name}</div>
         <img className="viz-picker__item-img" src={plugin.info.logos.small} />
       </div>
     );
   },
   (prevProps, nextProps) => {
-    if (prevProps.isSelected === nextProps.isSelected && prevProps.isCurrent === nextProps.isCurrent) {
+    if (prevProps.isCurrent === nextProps.isCurrent) {
       return true;
     }
     return false;

public/sass/components/_panel_editor.scss

@@ -165,7 +165,7 @@
     border: 1px solid $orange;
   }
 
-  &--selected {
+  &:hover {
     box-shadow: $panel-editor-viz-item-shadow-hover;
     background: $panel-editor-viz-item-bg-hover;
     border: $panel-editor-viz-item-border-hover;